响应式布局1--媒体查询和-webkit-min-device-pixel-ratio

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

-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{

选择器｛/*样式代码写在这里*/｝

}

--------------------------------------------------------

max-width 是媒体特性中常用的一个特性，其意思是指媒体类型小于或等于指定的宽度时，样式生效。

如：

@media screen and (max-width:480px){
.ads {
display:none;
}
}

上面表示的是：当屏幕小于或等于480px时,页面中的广告区块（.ads）都将被隐藏

min-width最小宽度

“min-width”与“max-width”相反，指的是媒体类型大于或等于指定宽度时，样式生效。

@media screen and (min-width:900px){
.wrapper{width: 980px;}
}

上面表示的是：当屏幕大于或等于900px时，容器“.wrapper”的宽度为980px。

多个媒体特性使用

多个关键词用“end”连接

当屏幕在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”。

上面的代码指的是“iphone.css”样式适用于最大设备宽度为480px，比如说iPhone上的显示，这里的“max-device-width”所指的是设备的实际分辨率，也就是指可视面积分辨率。

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