Question

我有一个样式表，里面有一些css3媒体查询。

@media (max-width: 480px), (-webkit-min-device-pixel-ratio: 1.5) {
    p, label, .labelish {font-size: 1.2em;}
    h3 {font-size: 1.4em;}
        body{
         background-color: red !important;
        }
}

现在我理解第一部分只有在用户浏览器低于480px时才应用这些样式。 -webkit-min-device-pixel-ratio: 1.5是我没有得到的。据我所知，它正在寻找高密度屏幕像素分辨率。但不确定为什么它会在Chrome上推出新的Mac视网膜屏幕。我问的原因是我有2台计算机，一台配有新的视网膜屏幕而另一台没有，上面的css只在视网膜屏幕上踢。

我发现此链接http://bjango.com/articles/min-device-pixel-ratio/列出了它应该影响的屏幕

Google Nexus S
三星Galaxy S II
HTC Desire
HTC Desire HD
HTC Incredible S
HTC Velocity
HTC Sensation

根据此列表，Mac视网膜屏幕不应该应用这些样式。

有人可以解释为什么会这样。

Answer 1

如果此属性与CSS的其余部分一样，那么-webkit-min-device-pixel-ratio: 1.5;应该应用于此比率报告为2的设备 - 与max-width: 480px;将应用宽度为320px的设备的方式相同

comma（,）在CSS选择器/列表中也是一个OR运算符，如果是你的意图则使用AND：

@media (max-width: 480px) and (-webkit-min-device-pixel-ratio: 1.5)

（-webkit-min-device-pixel-ratio：1.5）

1 个答案: