media媒體查詢器用法總結

標籤：

一 設定Meta標籤

首先我們在使用Media的時候需要先設定下面這段代碼，來相容行動裝置的展示效果：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

這段代碼的幾個參數解釋：

• width = device-width：寬度等於當前裝置的寬度

• initial-scale：初始的縮放比例（預設設定為1.0） 

• minimum-scale：允許使用者縮放到的最小比例（預設設定為1.0）   

• maximum-scale：允許使用者縮放到的最大比例（預設設定為1.0）  

• user-scalable：使用者是否可以手動縮放（預設設定為no，因為我們不希望使用者放大縮小頁面）

 

二 hack

?  1. <!--[if lt IE 9]><script src="js.js "></script><![endif]-->

        (1): 小於IE9 需要有個預設的class，這個要怎麼加，IE9以上的不需要這個預設class，加這個class的時機？

 

?  2. 用css Hack 解決

 body {

background: red;

 }

 

/* IE6、IE7變成綠色 */

@media all\9 {

  body {

background: green;

}

}

 

/* IE8變成藍色 */

@media \0screen {

  body {

background: blue;

}

}

 

/*IE9和IE10變成黃色*/  沒有必要IE9以上以支援

@media screen and (min-width:0\0) {

  body {

background: yellow; }

}

 

三 Media所有參數匯總

•   width:瀏覽器可視寬度。

•   height:瀏覽器可視高度。

•   device-width:裝置螢幕的寬度。

•   device-height:裝置螢幕的高度。

•   orientation:檢測裝置目前處於橫向還是縱向狀態。

•   aspect-ratio:檢測瀏覽器可視寬度和高度的比例。(例如：aspect-ratio:16/9)

•   device-aspect-ratio:檢測裝置的寬度和高度的比例。

•   color:檢測顏色的位元。（例如：min-color:32就會檢測裝置是否擁有32位顏色）

•   color-index:檢查裝置色彩索引表中的顏色，他的值不能是負數。

•   monochrome:檢測單色楨緩衝區域中的每個像素的位元。（這個太進階，估計咱很少會用的到）

•   resolution:檢測螢幕或印表機的解析度。(例如：min-resolution:300dpi或min-resolution:118dpcm)。

•   grid：檢測輸出的裝置是網格的還是位元影像裝置。

 

四 CSS3 Media width寫法

當瀏覽器尺寸小於960px

@media screen and (max-width: 960px){

    body{

        background: #000;

    }

}

 

當瀏覽器尺寸等於960px

@media screen and (max-device-width:960px){

    body{

        background:red;

    }

}

 

當頁面寬度大於960px

@media screen and (min-width:960px){

    body{

        background:orange;

    }

}

 

我們還可以混合使用上面的用法：當頁面寬度大於960px小於1200px的時候執行下面的（這次開放平台會用到這個）

@media screen and (min-width:960px) and (max-width:1200px){

    body{

        background:yellow;

    }

}

 

五 相關媒體查詢案例（感興趣可以看看）

1. http://www.w3cplus.com/css3/media-queries-alistpart

2. http://www.w3cplus.com/css3/media-queries-tee-gallery

3. http://www.w3cplus.com/css3/media-queries-hicksdesign

 

 

如有不全或者更好的博文，歡迎大家勇於分享，謝謝！

media媒體查詢器用法總結