响应式布局设置--@media only screen and

only(限定某种设备)

 是媒体类型里的一种

and 被称为关键字，其他关键字还包括 not(排除某种设备)

类型 解释
all 所有设备
braille 盲文
embossed 盲文打印
handHeld 手持设备
print 文档打印或打印预览模式
projection 项目演示，比如幻灯
screen @L_673_2@电脑屏幕
speech 演讲
tty 固定字母间距的网格的媒体，比如电传打字机
tv 电视

一般用的比较多，下面是我自己的尝试，列出常用的设备的尺寸，然后给页面分了几个尺寸的版本。

设备 屏幕尺寸
显示器 1280 x 800
ipad 1024 x 768
Android 800 x 480
iPhone 640 x 960

link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600pX) and (max-width: 800pX)">

b@media screen and (max-width: 600pX) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/

  .class {
    BACkground: #ccc;
  }
}

@media only screen and (device-aspect-ratio:4/3)

-webkit-min-device-pixel-ratio的常见值对比是设备上物理像素和设备独立像素，）

设备分辨率设备像素比率 @H_696_180@<><><><>@H_696_180@<><><><>

     -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

 

举例说明：该媒体查询表示样式表适用于分辨率大于每英寸点的设备：
dpi) { … }