响应式布局设置--@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-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

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) { … }