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 queriescss media queries 模板響應式布局—裝置像素密度測試 (-webkit-min-device-pixel-ratio)Responsive設計和CSS3 Media Queries的結合

media queries 媒體查詢使用