響應式佈局設定[email protected] only screen and (轉載)
/* 常用型別 */
型別 解釋
all 所有裝置
braille 盲文
embossed 盲文列印
handheld 手持裝置
print 文件列印或列印預覽模式
projection 專案演示，比如幻燈
screen 彩色電腦螢幕
speech 演講
tty 固定字母間距的網格的媒體，比如電傳打字機
tv 電視
screen一般用的比較多，下面是我自己的嘗試，列出常用的裝置的尺寸，然後給頁面分了幾個尺寸的版本。
/* 常用裝置 */
裝置 螢幕尺寸
顯示器 1280 x 800
ipad 1024 x 768
Android 800 x 480
iPhone 640 x 960 兩種方式a<linkrel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)"> 意思是當螢幕的寬度大於600小於800時，應用styleB.css b@media screen and (max-width: 600px) { /*當螢幕尺寸小於600px時，應用下面的CSS樣式*/
.class { background: #ccc; } }
device-aspect-ratio
device-aspect-ratio可以用來適配特定螢幕長寬比的裝置，這也是一個很有用的屬性，比如，我們的頁面想要對長寬比為4:3的普通螢幕定義一種樣式，然後對於16:9和16:10的寬屏，定義另一種樣式，比如自適應寬度和固定寬度：@media only screen and (device-aspect-ratio:4/3)
-webkit-min-device-pixel-ratio的常見值對比（是裝置上物理畫素和裝置獨立畫素，裝置畫素比率）
| 裝置 | 解析度 | 裝置畫素比率 |
| Android LDPI | 320×240 | 0.75 |
| Iphone 3 & Android MDPI | 320×480 | 1 |
| Android HDPI | 480×800 | 1.5 |
| Iphone 4 | 960×640 | 2.0 |
-webkit-min-device-pixel-ratio: 1.0
- 所有非 Retina 的 Mac
- 所有非 Retina 的 iOS 裝置
- Acer Iconia A500
- Samsung Galaxy Tab 10.1
- Samsung Galaxy S
- 其他裝置
- -webkit-min-device-pixel-ratio為1.3
- Google Nexus 7
- -webkit-min-device-pixel-ratio為1.5
- Google Nexus S
- Samsung Galaxy S II
- HTC Desire
- HTC Desire HD
- HTC Incredible S
- HTC Velocity
- HTC Sensation
- -webkit-min-device-pixel-ratio為2.0
- iPhone 4
- iPhone 4S
- iPhone 5
- iPad (3rd generation)
- iPad 4
- 所有Retina displays 的MAC
- Google Galaxy Nexus
- Google Nexus 4
- Google Nexus 10
- Samsung Galaxy S III
- Samsung Galaxy Note II
- Sony Xperia S
- HTC One X
-webkit-min-device-pixel-ratio: 3.0
1.HTC Butterfly2.Sony Xperia S (min-resolution:144dpi)
<resolution>（解析度）
- 使用於：點陣圖媒體型別,接受max/min字首：
“resolution”媒體特性描述輸出裝置的解析度，例如，畫素密度。若查詢裝置的非方形畫素，在“min-resolution”查詢中指定的值必須與最稀疏尺寸進行比較，在“max-resolution”查詢中必須與最密集尺寸進行比較。對於“resolution”（沒有“min-”或“max-”字首）查詢從不查詢裝置的非方形畫素。
對於印刷機，相當於解析度（任意顏色的繪製點的解析度）。
舉例說明：該媒體查詢表示樣式表適用於解析度大於每英寸144點的裝置： @media print and (min-resolution: 144dpi) { … }
在這篇文章中我嘗試解開媒體查詢的迷霧。首先是名詞解析：
width: 通常指代視口寬度；另外width和device width的區別在於，device width指代是螢幕的物理寬度。比如iphone5的螢幕解析度是1136×640，豎屏時device width是640，橫屏時是1136。通常，移動裝置的瀏覽器都是全屏的，所以一般情況下width等於device-width。但是height和device-height的情況不一樣（瀏覽器上方的位址列和下方的工具欄有可能不算進視口高度）。鑑於一般媒體查詢不採用height，所以本文所有例子全部使用width，指代width的畫素全部加粗便於理解。
- 規則1： @media only screen and (min-width:
330px) {…}
指「width大於或者等於min-width，採用{…}的樣式」
所以，如果width是320px，這條規則返回false；返回false的媒體查詢規則會直接被瀏覽器過濾掉，不會渲染這條規則中的CSS樣式。這種情況翻譯過來就是：
「如果320px大於等於330px，採用{…}的樣式」
問題1：有width為310px, 320px, 330px, 340px, 350px的視口，哪些視口會採用以上規則（指代規則1中{…}的CSS樣式）？
- 規則2： @media only screen and (max-width:
330px) {…}
指「width小於或者等於max-width，採用{…}的樣式」
如果width是320px，這條規則會返回true，瀏覽器會解析這段規則中的CSS樣式。這種情況翻譯過來就是：
[如果320px小於或者等於330px，採用{…}的樣式」
問題2：有width為310px, 320px, 330px, 340px, 350px的視口，哪些視口會採用以上規則（指代規則2中{…}的CSS樣式）？
這條規則會更加容易理解，簡單解釋就是：視口寬度在min-width和max-width之間的，都會採用這條規則。
- 規則3：@media only screen and (min-width:
330px) and (max-width:350px) {…}
如果width為340px, 這條規則返回true。翻譯過來就是：
「如果340px在330px和350px之間，採用{…}的樣式」
問題3：有width為310px, 320px, 330px, 340px, 350px的視口，哪些視口會採用以上規則（指代規則3中{…}的CSS樣式）？
例項：
body { background-color: gray; } @media screen and ( max-width: 960px ) { body { background-color: red; } } @media screen and ( max-width: 768px ) { body { background-color: orange; } } @media screen and ( max-width: 550px ) { body { background-color: yellow; } } @media screen and ( max-width: 320px ) { body { background-color: green; } }這條規則翻譯過來就是:
1. 顯示灰色背景； 2. width為0-960px的，顯示紅色背景； 3. width為0-768px的，顯示橙色背景； 4. width為0-550px的，顯示黃色背景； 5. width為0-320px的，顯示綠色背景；需要提醒一下的是CSS的優先順序概念，在樣式表中越後的樣式優先順序越高，就是後面的樣式會覆蓋前面的樣式。在這個例子中，我們先設定了預設顏色為灰色。如果width大於960px的，會顯示灰色。
假設width為750px，會先匹配到灰色，再匹配紅色，最終顯示了橙色。由於width等於750px，它不在0-550px和0-320px這個範圍，瀏覽器不會解析這些樣式。