[email protected]规则
1.1媒体类型：
all:匹配所有设备；
handle:匹配手持设备(小屏幕、单色、带宽有限)；
print:匹配分页媒体或打印预览模式下的屏幕；
screen:匹配彩色计算机屏幕；
其他媒体类型还有braille(盲文点字触觉反馈设备)、embossed(盲文分页打印机)、projection(投影仪)、speech(语音合成器)、tty(电话机屏幕等固定宽度字符栅格设备)和tv(电视机)。
1.2常用媒体特性：
min-device-width和max-device-width:匹配设备屏幕的尺寸；
min-width和max-width:匹配视口的宽度，如浏览器宽度；
orientation(值为portrait和landscape):匹配设备是横屏还是竖屏。
1.3逻辑运算：and、not、or
1.4关键字：all 、 only
2.<link>标签的media属性
可以通过link标签中的media属性，有选择的加载样式表。
<link type="text/css" media="print" href="css/print_style.css" /> <link type="text/css" media="screen and (max-width:568px)" href="css/iphone_style.css" />
3.断点
@media screen and (max-width:640px){ /*CSS规则*/}
个人认为不要针对某一款设备，来设置样式，而是要在发现样式不合适时设置。
devicePixelRatio指window.devicePicelRatio。
devicePixelRatio = 物理像素 / 设备独立像素。
非视网膜屏幕设备，window.devicePixelRatio=1。
实际测试
4.1.浏览器
我电脑上的chrome浏览器（版本 51.0.2704.106 m），弹出1：
FF浏览器（48.0.2）：
4.2.IOS
无视网膜设备为1，视网膜设备为2。
4.3.Android没有固定值
总结：
IOS设备：screen.width * devicePixelRatio = 物理像素。
Andriod：screen.width / devicePicelRatio = 设备独立像素。