jQuery – CSS – 使用jQuery並配合SUSY2來判斷當前屏幕種類
原理是這樣，建立三個不讓使用者看見的DIV，分別代表 mobile, pad, desktop，利用 SUSY 讓他們能在三種裝置個別顯示。最後在透過 JS 去得知那三個 DIV 有顯示的是誰。
說明如下：
index5.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>判斷當前的屏幕</title> <link rel="stylesheet" href="css/stylesheets/style5.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script> $(function (){ //原理是：判斷目前螢幕中是誰可以被看見 function current_screen() { return $(".current_screen").find("li:visible").attr("class"); } //取得當前的屏幕 $(".get_screen").on("click", function (){ var scr = current_screen(); if (scr == "mobile") alert("執行手機"); else if (scr == "pad") alert("執行平板"); else if (scr == "desktop") alert("執行桌電"); }) }) </script> </head> <body> <div class="container"> <input class="get_screen" type="button" value="取得當前的屏幕"> </div> <!--可在body 內建立一個判別的元素，隱藏的特別方法參考SCSS --> <ul class="current_screen"> <li class="mobile"></li> <li class="pad"></li> <li class="desktop"></li> </ul> </body> </html> |
style5.scss
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
@import "base"; @import "compass/reset"; * { @include box-sizing(border-box); } html, body { height: 100%; } .container { @include _break("mobile") { @include container(); height: 100%; } @include _break("pad") { @include container(); } @include _break("desktop") { @include container(); } } // 判別使用 // 但不必給使用者看到所以隱藏起來。 .current_screen { // 視覺隱藏不可以使用 display: none ， // 因為JQ在判斷中，確實會把你隱藏的元素當作 "不可見"， // 所以我們要用這種方法來欺騙電腦 height: 0px; overflow: hidden; //安全起見，指定寬高，確保有會被顯示出來 li { width: 1px; height: 1px; } .mobile { @include _break("mobile") {display: block;} @include _break("pad") {display: none;} @include _break("desktop") {display: none;} } .pad { @include _break("mobile") {display: none;} @include _break("pad") {display: block;} @include _break("desktop") {display: none;} } .desktop { @include _break("mobile") {display: none;} @include _break("pad") {display: none;} @include _break("desktop") {display: block;} } } |
_base.scss
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
@import "susy"; @import "breakpoint"; @import "compass/css3"; //-------- 設定 開始 ----------- //susy 環境設定 $susy: ( flow: ltr, math: fluid, output: float, gutter-position: after, container: auto, container-position: center, columns: 4, gutters: 1/4, column-width: false, global-box-sizing: content-box, last-flow: to, debug: ( image: show, color: rgba(#66f, .25), output: background, toggle: top right, ), use-custom: ( background-image: true, background-options: false, box-sizing: true, clearfix: false, rem: true, ) ); //設定三種尺寸 $break_layout : ( mobile: ( break: 0px, layout: 4 ), pad: ( break: 640px, layout: 8 ), desktop: ( break: 1280px, layout: 12 ) ); //-------- 設定 結束 ----------- //-------- Mixin 開始 ---------- //方便撰寫的自訂 mixin 斷點樣式 @mixin _break($screen: mobile) { $map : map-get($break_layout, $screen); $break: map-get($map, "break"); $layout: map-get($map, "layout"); @include susy-breakpoint($break, $layout) { @content; } } //-------- Mixin 結束 ---------- |