css3的媒體查詢(Media Queries)

css3的媒體查詢(Media Queries)

 

我今天就總結一下響應式設計的核心CSS技術Media(媒體查詢器)的用法。

先看一個簡單的例子：

 <link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

上面的media語句表示的是：當頁頁寬度小於或等於600px,調用small.css樣式表來渲染你的Web頁面。首先來看media的語句中包含的內容：

一、screen：這個不用說你們都知道，指的是一種媒體類型；

二、and：被稱爲關鍵詞，與其類似的還有not,only，稍後會介紹；

三、（max-width:600px）：這個就是媒體特性，說得通俗一點就是媒體條件。

前面這個簡單的實例引出兩個概念性的東西，一個就是媒體類型（Media Type）和 媒體特性（Media Query），首先一塊兒來理解一下這兩個概念：

媒體類型(Media Type)在css2中是一個常見的屬性，也是一個很是有用的屬性，能夠經過媒體類型對不一樣的設備指定不一樣的樣式，在css2中咱們常碰到的就是all（所有）,screen（屏幕）,print（頁面打印或打邱預覽模式）,其實在媒體類型不止這三種，w3c總共列出了10種媒體類型。

媒體特性Media Query當作Media Type(判斷條件)+CSS(符合條件的樣式規則),爲了更能理解Media Query，咱們在次回到前面的實例上：

 <link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

轉換成css中的寫法爲：

  @media screen and (max-width: 600px) { 選擇器 { 屬性：屬性值； } }

其實就是把small.css文件中的樣式放在了@media srceen and (max-width;600px){...}的大括號之中。在語句上面的語句結構中，能夠看出Media query和css的屬性集合很類似，主要區別在：

一、Media query只接受單個的邏輯表達式做爲其值，或者沒有值；

二、css屬性用於聲明如何表現頁頁的信息；而Media Query是一個用於判斷輸出設備是否知足某種條件的表達式；

三、Media Query其中的大部分接受min/max前綴，用來表示其邏輯關係，表示應用於大於等於或者小於等於某個值的狀況

四、CSS屬性要求必須有屬性值，Media Query能夠沒有值，由於其表達式返回的只有真或假兩種.

經常使用的Media Query以下表所示：

兼容的瀏覽器：

下面咱們一塊兒來看看Media Queries的具體使用方式

1、最大寬度Max Width

  <link rel="stylesheet" media="screen and (max-width:600px)" href="small.css" type="text/css" />

上面表示的是：當屏幕小於或等於600px時，將採用small.css樣式來渲染Web頁面。

2、最小寬度Min Width

 <link rel="stylesheet" media="screen and (min-width:900px)" href="big.css" type="text/css" />

3、多個Media Queries使用

 <link rel="stylesheet" media="screen and (min-width:600px) and (max-width:900px)" href="style.css" type="text/css" />

Media Query能夠結合多個媒體查詢，換句話說，一個Media Query能夠包含0到多個表達式，表達式又能夠包含0到多個關鍵字，以及一種Media Type。正如上面的其表示的是當屏幕在600px-900px之間時採用style.css樣式來渲染web頁面。

4、設備屏幕的輸出寬度Device Width

<link rel="stylesheet" media="screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />

上面的代碼指的是iphone.css樣式適用於最大設備寬度爲480px，好比說iPhone上的顯示，這裏的max-device-width所指的是設備的實際分辨率，也就是指可視面積分辨率

5、iPhone4

 <link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />

上面的樣式是專門針對iPhone4的移動設備寫的。

6、iPad

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" type="text/css" /> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" type="text/css" />

在大數狀況下，移動設備iPad上的Safari和在iPhone上的是相同的，只是他們不一樣之處是iPad聲明瞭不一樣的方向，好比說上面的例子，在縱向(portrait)時採用portrait.css來渲染頁面；在橫向（landscape）時採用landscape.css來渲染頁面。

7、android

/*240px的寬度*/
  <link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" /> /*360px的寬度*/ <link rel="stylesheet" media="only screen and (min-device-width:241px) and (max-device-width:360px)" href="android360.css" type="text/css" /> /*480px的寬度*/ <link rel="stylesheet" media="only screen and (min-device-width:361px) and (max-device-width:480px)" href="android480.css" type="text/css" />

咱們可使用media query爲android手機在不一樣分辨率提供特定樣式，這樣就能夠解決屏幕分辨率的不一樣給android手機的頁面重構問題。

8、not關鍵字

 <link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" type="text/css" />

not關鍵字是用來排除某種制定的媒體類型，換句話來講就是用於排除符合表達式的設備。

9、only關鍵字

 <link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />

only用來定某種特定的媒體類型，能夠用來排除不支持媒體查詢的瀏覽器。其實only不少時候是用來對那些不支持Media Query但卻支持Media Type的設備隱藏樣式表的。其主要有：支持媒體特性（Media Queries）的設備，正常調用樣式，此時就當only不存在；對於不支持媒體特性(Media Queries)但又支持媒體類型(Media Type)的設備，這樣就會不讀了樣式，由於其先讀only而不是screen；另外不支持Media Qqueries的瀏覽器，不管是否支持only，樣式都不會被採用。

10、其餘

在Media Query中若是沒有明確指定Media Type，那麼其默認爲all，如：

<link rel="stylesheet" media="(min-width: 701px) and (max-width: 900px)" href="medium.css" type="text/css" />

另外還有使用逗號（，）被用來表示並列或者表示或，以下

<link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />

上面代碼中style.css樣式被用在寬度小於或等於480px的手持設備上，或者被用於屏幕寬度大於或等於960px的設備上。

 

下面具體講解過程：

準備工做1：設置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，由於咱們不但願用戶放大縮小頁面） 

 

準備工做2：加載兼容文件JS

由於IE8既不支持HTML5也不支持CSS3 Media，因此咱們須要加載兩個JS文件，來保證咱們的代碼實現兼容效果：

<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

 

準備工做3：設置IE渲染方式默認爲最高(這部分能夠選擇添加也能夠不添加)

如今有不少人的IE瀏覽器都升級到IE9以上了，因此這個時候就有又不少詭異的事情發生了，例如如今是IE9的瀏覽器，可是瀏覽器的文檔模式倒是IE8:

爲了防止這種狀況，咱們須要下面這段代碼來讓IE的文檔模式永遠都是最新的：

<meta http-equiv="X-UA-Compatible" content="IE=edge">

不過又有一個更給力的寫法：

<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">

怎麼這段代碼後面加了一個chrome=1，這個Google Chrome Frame（谷歌內嵌瀏覽器框架GCF），若是有的用戶電腦裏面裝了這個chrome的插件，就可讓電腦裏面的IE不論是哪一個版本的均可以使用Webkit引擎及V8引擎進行排版及運算，無比給力，不過若是用戶沒裝這個插件，那這段代碼就會讓IE以最高的文檔模式展示效果。這段代碼我仍是建議大家用上，不過不用也是能夠的。

 

進入CSS3 Media

通常寫法：

@media screen and (max-width: 960px){
    body{
        background: #000;
    }
}

 

應該有人會發現上面這段代碼裏面有個screen，他的意思是在告知設備在打印頁面時使用襯線字體，在屏幕上顯示時用無襯線字體。可是目前我發現不少網站都會直接省略screen,由於你的網站可能不須要考慮用戶去打印時，你能夠直接這樣寫：

@media (max-width: 960px){
    body{
        background: #000;
    }
}

 

其中css2的媒體查詢：

<link rel="stylesheet" type="text/css" media="screen" href="style.css">

咱們想知道移動設備是否是縱向放置的顯示屏，能夠這樣寫：

<link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" href="style.css">

咱們把第一段的代碼也用CSS2來實現，讓它同樣可讓頁面寬度小於960的執行指定的樣式文件：

<link rel="stylesheet" type="text/css" media="screen and (max-width:960px)" href="style.css">

可是上面這個方法， 最大的弊端是他會增長頁面http的請求次數，增長了頁面負擔，咱們用CSS3把樣式都寫在一個文件裏面纔是最佳的方法。

 

下面的寫法是實現尺寸等於480px：

@media (max-device-height:480px) and (-webkit-min-device-pixel-ratio:2){

//本身添加的樣式

}

其中對於-webkit-min-device-pixel-ratio做以下解釋：

     -webkit-min-device-pixel-ratio爲1.0

    1.  全部非Retina的Mac

    2.  全部非Retina的iOS設備

    3.  Acer Iconia A500 

    4.  Samsung Galaxy Tab 10.1

    5.  Samsung Galaxy S 

 

     -webkit-min-device-pixel-ratio爲1.3

    1.  Google Nexus 7

 

    -webkit-min-device-pixel-ratio爲1.5

    1.  Google Nexus S 

    2.  Samsung Galaxy S II 

    3.  HTC Desire

    4.  HTC Desire HD

    5.  HTC Incredible S 

    6.  HTC Velocity

    7.  HTC Sensation 

 

     -webkit-min-device-pixel-ratio爲2.0

    1.  iPhone 4

    2.  iPhone 4S

    3.  iPhone 5

    4.  iPad (3rd generation)

    5.  iPad 4

    6.  全部Retina displays 的MAC

    7.  Google Galaxy Nexus

    8.  Google Nexus 4

    9.  Google Nexus 10

    10.  Samsung Galaxy S III

    11.  Samsung Galaxy Note II

    12.  Sony Xperia S

    13.  HTC One X