-webkit-min-device-pixel-ratio其实就是这个玩意
window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例
公式表示就是：window.devicePixelRatio = 物理像素 / dips
关于媒体查询---例：
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) { html, body { font-size: 20px; } }
@media (device-width: 375px) and (-webkit-min-device-pixel-ratio: 2) { html, body { font-size: 23.4375px; } }
@media (device-width: 414px) and (-webkit-min-device-pixel-ratio: 3) { html, body { font-size: 25.875px; } }
首先 @media only screen and
only(限定某种设备)
and 就是and.....其他还包括 not(排除某种设备)
screen媒体类型
用法：
如：
@media screen and (max-width:480px){
.ads {
display:none;
}
}
上面表示的是：当屏幕小于或等于480px时,页面中的广告区块（.ads）都将被隐藏
“min-width”与“max-width”相反，指的是媒体类型大于或等于指定宽度时，样式生效。
@media screen and (min-width:900px){
.wrapper{width: 980px;}
}
当屏幕在600px~900px之间时，body的背景色渲染为“#f5f5f5”，如下所示。
@media screen and (min-width:600px) and (max-width:900px){
body {background-color:#f5f5f5;}
}
设备屏幕的输出宽度Device Width
在智能设备上，例如iPhone、iPad等，还可以根据屏幕设备的尺寸来设置相应的样式（或者调用相应的样式文件）。同样的，对于屏幕设备同样可以使用“min/max”对应参数，如“min-device-width”或者“max-device-width”。
<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />
not关键词
使用关键词“not”是用来排除某种制定的媒体类型，也就是用来排除符合表达式的设备。换句话说，not关键词表示对后面的表达式执行取反操作，如：
@media not print and (max-width: 1200px){样式代码}
上面代码表示的是：样式代码将被使用在除打印设备和设备宽度小于1200px下所有设备中。
Media Queries在其他浏览器中不要像其他CSS3属性一样在不同的浏览器中添加前缀。
Responsive设计——不同设备的分辨率设置
例：
1.1024px显屏
@media screen and (max-width : 1024px) {
/* 样式写在这里 */
}
2.800px显屏
@media screen and (max-width : 800px) {
/* 样式写在这里 */
}
3.640px显屏
@media screen and (max-width : 640px) {
/* 样式写在这*/
}
4.iPad横板显屏
@media screen and (max-device-width: 1024px) and (orientation: landscape) {
/* 样式写在这 */
}
5.iPad竖板显屏
@media screen and (max-device-width: 768px) and (orientation: portrait) {
/* 样式写在这 */
}
portrait：指定输出设备中的页面可见区域高度大于或等于宽度。landscape：除portrait值情况外，都是landscape
6.iPhone 和 Smartphones
@media screen and (min-device-width: 320px) and (min-device-width: 480px) {
/* 样式写在这 */
}
-----------------------------------------------------------------------------------
再回到device-aspect-ratio
device-aspect-ratio可以用来适配特定屏幕长宽比的设备，这也是一个很有用的属性，比如，我们的页面想要对长宽比为4:3的普通屏幕定义一种样式，然后对于16:9和16:10的宽屏，定义另一种样式，比如自适应宽度和固定宽度：
@media only screen and (device-aspect-ratio:4/3)
常见参数，转
Devices with -webkit-min-device-pixel-ratio: 1.0
All non-Retina Macs
Apple iPhone (1st generation)
Apple iPhone 3G
Apple iPhone 3GS
Apple iPad (1st generation)
Apple iPad 2
Apple iPad mini (1st generation)
Acer Iconia A500
Samsung Galaxy Tab 10.1
Samsung Galaxy S
Devices with -webkit-min-device-pixel-ratio: 1.3
Asus MemoPad HD 7
Google Nexus 7 (2012 model)
Devices with -webkit-min-device-pixel-ratio: 1.4
Nokia Lumia 520
Devices with -webkit-min-device-pixel-ratio: 1.5
Google Nexus S
HTC Desire
HTC Desire HD
HTC Incredible S
HTC Velocity
HTC Sensation
Kindle Fire HD
Samsung Galaxy S II
Sony Xperia Tablet Z
Sony Xperia U
Devices with -webkit-min-device-pixel-ratio: 2.0
All Macs with Retina displays
Apple iPhone 4
Apple iPhone 4S
Apple iPhone 5
Apple iPhone 5c
Apple iPhone 5s
Apple iPhone 6
Apple iPad (3rd generation)
Apple iPad 4
Apple iPad Air
Apple iPad mini (2rd generation)
HTC One X
Google Galaxy Nexus
Google Nexus 4
Google Nexus 7 (2013 model)
Google Nexus 10
Motorola Moto X
Samsung Galaxy S III
Samsung Galaxy Note II
Sony Xperia S
Sony Xperia T
Devices with -webkit-min-device-pixel-ratio: 2.6
Nokia Lumia 930
Google Nexus 5X
Devices with -webkit-min-device-pixel-ratio: 3.0
HTC One (M7)
HTC Butterfly
Huawei Honor 6
Apple iPhone 6 Plus
LG G2
Nexus 5
Nexus 6
OnePlus One
Oppo Find 7 (X9076)
Samsung Galaxy S4
Samsung Galaxy Note 3
Samsung Galaxy Note 4
Sony Xperia Z
Xiaomi Mi 3