響應式布局設定--@media only screen and

標籤：

@media only screen and  only(限定某種裝置) screen 是媒體類型裡的一種 and 被稱為關鍵字，其他關鍵字還包括  not(排除某種裝置)

/* 常用類型 */
類型解釋
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<link rel="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-ratiodevice-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

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 

-webkit-min-device-pixel-ratio: 3.0

   1.HTC Butterfly
   2.Sony Xperia S

 

(min-resolution:144dpi)
<resolution>（解析度） 

使用於：位元影像媒體類型,接受max/min首碼：

“resolution”媒體特性描述輸出裝置的解析度，例如，像素密度。若查詢裝置的非方形像素，在“min-resolution”查詢中指定的值必須與最稀疏尺寸進行比較，在“max-resolution”查詢中必須與最密集尺寸進行比較。對於“resolution”（沒有“min-”或“max-”首碼）查詢從不查詢裝置的非方形像素。

對於印刷機，相當於解析度（任意顏色的繪製點的解析度）。

舉例說明：該媒體查詢表示樣式表適用於解析度大於每英寸144點的裝置：@media print and (min-resolution: 144dpi) { … }

響應式布局設定[email protected] only screen and