因为非Retina屏的iPad的-webkit-min-device-pixel-ratio是1.0
Retina屏的设备是2.0。所以如果想对这两类设备分别设置css样式时，可以使用
@media screen and (-webkit-min-device-pixel-ratio: 1.0)和@media screen and (-webkit-min-device-pixel-ratio: 2.0)来区分。但是要注意顺序，如果2.0在前1.0在后并且设置的属性相同而值不同，那么Retina屏的设备的同属性的样式会被2.0的覆盖。必须把2.0放在1.0之后，例如：
@media screen and (-webkit-min-device-pixel-ratio: 1.0){
div {
background-color: red;
}
}
@media screen and (-webkit-min-device-pixel-ratio: 2.0){
div {
background-color: green;
}
}
相关推荐
前端大厂最新面试题-前端综合面试 ...//devicePixelRatio=2设置meta <meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no"> //devicePixelRatio=3设置meta ...
这段代码中，`-webkit-min-device-pixel-ratio:0`是一个仅在WebKit浏览器中有效的媒体特性，用于指定设备像素比，可以用来触发WebKit特定的样式规则。 2. **伪类前缀**： - 通过使用`-webkit-`前缀结合伪类来实现...
@media screen and (-webkit-min-device-pixel-ratio: 2) { .border { border: 0.5px solid #ccc; } } @media screen and (-webkit-min-device-pixel-ratio: 3) { .border { border: 0.333333px solid #ccc; ...
}@media all and ( -webkit-min-device-pixel-ratio : 1.5 ) , ( min--moz-device-pixel-ratio : 1.5 ) , ( -o-min-device-pixel-ratio : 1.5 / 1 ) , ( min-device-pixel-ratio : 1.5 ) , ( min-resolution : 138 ...
(-webkit-min-device-pixel-ratio: 2) { .border { border: 0.5px solid #ccc } } @media screen and (-webkit-min-device-pixel-ratio: 3) { .border { border: 0.333333px solid #ccc } } 使用边框图片 这样的1张6...
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { .t1 { color: #9900FF; } /* Chrome/Safari */ } @media screen and (-webkit-min-device-pixel-...
@media all and (-webkit-min-device-pixel-ratio: 10000), not all and (-webkit-min-device-pixel-ratio: 0) { .example { background: url(http://guandian.co/logo.jpg) no-repeat center top; } } ``` #...
在这个媒体查询中，`-webkit-min-device-pixel-ratio:0` 是一个WebKit专有的特性，它通常用于区分WebKit浏览器和其他非WebKit浏览器。在大括号内部，你可以定义只对Safari和Chrome生效的CSS样式，比如： ```css ....
@media only screen and (min-device-height: 790px) and (max-device-height: 810px) and (-webkit-min-device-pixel-ratio: 1.3) and (-webkit-max-device-pixel-ratio: 1.4) and (orientation: landscape) { ...
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { .t1{color:#9900FF} /* Opera */ } @media screen and (-webkit-min-device-pixel-ratio:0) { .t1{...
opera、safari、chrome识别： @media all and (min-width: 0px){…}...@media screen and (-webkit-min-device-pixel-ratio:0){…} //IE、Firefox不识别该规则 仅opera识别： @media screen and (-webkit-min-device
浏览器特定的 hacks /* IE 6 */ ... /* IE 7 */ ... /* IE 7 and modern browsers */ ... /* Modern browsers (not IE 7) */ ... @media screen and (-webkit-min-device-pixel-ratio:0) { .yourclass { } }
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-...
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { .t1 { color: #9900FF } /* Opera */ } @media screen and (-webkit-min-device-pixel-ratio:0) { ...
----------- iPhone 4 and 4S ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { / Here ...
@media screen and (-webkit-min-device-pixel-ratio: 0) { #nav { width: 300px; } } /* Opera */ @media all and (-webkit-min-device-pixel-ratio: 10000), not all and (-webkit-min-device-pixel-ratio: 0)...
PostCSS image-set（）函数 可让您按照规范在CSS中使用image-set()函数显示与分辨率...}@media ( -webkit-min-device-pixel-ratio : 2 ), ( min-resolution : 192 dpi ) { .example { background-image : url( img@2x.p
@media screen and (-webkit-min-device-pixel-ratio: 0) { .test1:after { content: "."; display: inline-block; width: 100%; overflow: hidden; height: 0; } } ``` 在这个例子中，`.test1` 类定义了...
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx) { /* 在DPR为2或更高的设备上应用的样式 */ } ``` ...