jQuery – CSS – 使用jQuery並配合SUSY2來判斷當前屏幕種類

原理是這樣,建立三個不讓使用者看見的DIV,分別代表 mobile, pad, desktop,利用 SUSY 讓他們能在三種裝置個別顯示。最後在透過 JS 去得知那三個 DIV 有顯示的是誰。

說明如下:

index5.html

<!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

@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

@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 結束 ----------

 

Comments

發表迴響