0

我有一个样式表，其中包含一些 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;
        }
}

现在我了解了第一部分，只有在用户浏览器低于 480 像素时才应用这些样式。这-webkit-min-device-pixel-ratio: 1.5是我没有得到的。我知道它正在寻找高密度屏幕像素分辨率。但不确定为什么它会出现在 Chrome 上的新 Mac 视网膜屏幕上。我问的原因是我有两台电脑，一台装有新的视网膜屏幕，另一台没有，上面的 CSS 只在视网膜屏幕上启动。

我找到了这个链接http://bjango.com/articles/min-device-pixel-ratio/它列出了它应该影响的屏幕

  • 谷歌 Nexus S
  • 三星盖乐世 S II
  • 宏达欲望
  • HTC 欲望高清
  • HTC 不可思议的 S
  • 宏达速度
  • HTC 感觉

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

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

4

1 回答 1

2

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

,当涉及到 CSS 选择器/列表时，逗号 ( ) 也是 OR 运算符，如果这是您的意图，请使用AND代替：

@media (max-width: 480px) and (-webkit-min-device-pixel-ratio: 1.5)
于 2013-04-12T16:20:56.060 回答