-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