CSS3媒體查詢(Media Queries)與移動裝置顯示尺寸大全
最近在做公司官網，需要適配移動端，於是結合自己以前總結的知識，以及在網上找到的相關資料供大家參考。
舉個栗子：
<link rel="stylesheet" media="screen and (max-width: 375px)" href="solution_schoolNet.css" />
此media屬性值的意思是：當頁頁寬度小於或等於600px,就呼叫solution_schoolNet.css樣式表來渲染頁面。
media的語句中包含的內容：
- 1、screen：這個不用說大家都知道，指的是一種媒體型別；
- 2、and：被稱為關鍵詞，與其相似的還有not,only，稍後會介紹；
- 3、（max-width:600px）：這個就是媒體特性，說得通俗一點就是媒體條件。
用css來表示：
@media screen and (max-width: 375px) {
div {
width:100%
}
}
常用媒體查詢如下表所示：
下面我們一起來看看Media Queries的具體使用方式
一、最大寬度Max Width
<link rel="stylesheet" media="screen and (max-width:375px)" href="solution_schoolNet.css"/>
上面表示的是：當螢幕小於或等於375px時，將採用solution_schoolNet.css樣式來渲染Web頁面。
二、最小寬度Min Width
<link rel="stylesheet" media="screen and (min-width:900px)" href="solution_smartCampus.css"/>
三、多個Media Queries使用
<link rel="stylesheet" media="screen and (min-width:414px) and (max-width:736px)" href="solution_wifi.css"/>
Media Query可以結合多個媒體查詢，換句話說，一個Media Query可以包含0到多個表示式，表示式又可以包含0到多個關鍵字，以及一種Media Type。正如上面的其表示的是當螢幕在414px-736px之間時（6s plus）採用style.css樣式來渲染web頁面。
四、裝置螢幕的輸出寬度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所指的是裝置的實際解析度，也就是指可視面積分辨率
五、iPhone4
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />
上面的樣式是專門針對iPhone4的移動裝置寫的。
六、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來渲染頁面。
七、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手機的頁面重構問題。
八、not關鍵字
<link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" type="text/css" />
not關鍵字是用來排除某種制定的媒體型別，換句話來說就是用於排除符合表示式的裝置。
九、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，樣式都不會被採用。
十、其他
在Media Query中如果沒有明確指定Media Type，那麼其預設為all，如：
<link rel="stylesheet" media="(min-width: 701px) and (max-width: 900px)" href="medium.css" type="text/css" />
其他方面：
-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
device-aspect-ratio
語法：device-aspect-ratio：<ratio>
取值：<ratio>：指定比率
說明： 定義輸出裝置的螢幕可見寬度與高度的比率。
- 如常講的顯示器螢幕比率：
4/3,16/9,16/10 - 本特性接受min和max字首，因此可以派生出
min-device-aspect-ratio和max-device-aspect-ratio兩個媒體特性。
一般例子：
@media screen and (device-aspect-ratio:4/3){ … }
@import url(example.css) screen and (min-device-aspect-ratio:4/3);
版本支援：IE9以及以上的瀏覽器開始支援
例子：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>media features device-aspect-ratio_CSS參考手冊_web前端開發參考手冊系列</title>
<style>
@media screen and (device-aspect-ratio:16/10){
body{color:#f00;}
}
</style>
</head>
<body>
<div class="test">當你將輸出裝置螢幕解析度為16:10時，本行文字顯示為紅色</div>
<script>
</script>
</body>
</html>
例項,判斷螢幕橫屏：
@media screen and (min-aspect-ratio: 13/8) {}
移動裝置顯示尺寸大全
@media screen and ( min-width: 212px){/*213px顯示屏樣式 LG Optimus One*/}
@media screen and ( min-width: 319px){/*320px顯示屏樣式 蘋果4/4S/5C/5S黑莓Z30 */}
@media screen and ( min-width: 359px){/*360px顯示屏樣式 索尼Z1*/}
@media screen and ( min-width: 383px){/*384px顯示屏樣式 黑莓Z10 谷歌 Nexus 6 LG Optimus G*/}
@media screen and ( min-width: 399px){/*399px顯示屏樣式 三星galaxyNote*/}
@media screen and ( min-width: 414px){/*414px顯示屏樣式 蘋果6plus*/}
@media screen and ( min-width: 423px){/*424px顯示屏樣式 LG 4X */}
@media screen and ( min-width: 479px){/*480px顯示屏樣式 索尼MT27i Xperia sola*/}
@media screen and ( min-width: 539px){/*640px顯示屏樣式 摩托羅拉Droid3/4/Razr Atrix 4g*/}
@media screen and ( min-width: 639px){/*640px顯示屏樣式*/}
@media screen and ( min-width: 640px){/*640px以上顯示屏樣式*/}