media queries 媒體查詢使用

media queries 翻譯過來就是媒體查詢，media 指的媒體類型、那麼有哪些類型呢，經常使用的有 screen(屏幕)、打印(print)，我的理解就是它所在的不一樣終端。

經常使用的用法：
1，<link rel="stylesheet" media="screen and (max-width:600px)" href="small.css" />
根據符合的條件，調用相應的樣式

2，在css中直接使用 媒體特性（判斷條件）
Media query只接受單個的邏輯表達式做爲其值，或者沒有值；
咱們把上面調用外部樣式更改成css寫法：
@media screen and (max-width:600px){
    html { font-size:30px;}
}
max-width 表示小於等於某個寬度的時候
min-width 表示大於等於某個寬度的時候

更多屬性值參考：

3，多個media queries（媒體特性） 使用
<link rel="stylesheet" media="screen and (min-width:600px) and (max-width:900px)" href="b.css" type="text/css" />
上面的的意思是在屏幕寬度大於等於600px、小於等於900px的時候，顯示b.css 中的樣式


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所指的是設備的實際分辨率，也就是指可視面積分辨率
我的理解：根據你終端設備的屏幕大小，來調用樣式，不適合用於pc端
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的設備上。

解決問題：

全部的一切知識都是爲了解決工做中遇到的問題，那麼media queries 解決咱們的什麼問題呢？也就是在什麼狀況下要用到呢？我是在製做手機頁面的根據屏幕大小來制定不一樣間距、字體大小，所用到的，一樣它也能夠指定響應式的頁面。那麼他的字體怎麼設置呢？舉個例子，在640px下，字體大小是38px，那麼再480px終端下，字體大小就是 480/640*38 最後等於28.5px 。若是要獲得準確的字體，咱們須要隨時的去計算，用js的方法我尚未作過，有空能夠嘗試下，可是經過css3的media queris 就能夠解決我所遇到的問題。

可是若是在 iphone下字體顯示的比較小，怎麼辦呢？（待續）

參考網址：

css3 media queries

css media queries 模板

響應式佈局—設備像素密度測試 (-webkit-min-device-pixel-ratio)

Responsive設計和CSS3 Media Queries的結合