(-webkit-min-device-pixel-ratio: 1.5)答案

【问题标题】：(-webkit-min-device-pixel-ratio: 1.5)(-webkit-min-device-pixel-ratio: 1.5)
【发布时间】：2013-04-05 05:18:31
【问题描述】：

我有一个样式表，其中包含一些 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
三星 Galaxy S II
HTC Desire
HTC Desire HD
HTC 不可思议的 S
HTC 速度
HTC Sensation

根据此列表，Mac Retina 屏幕不应应用这些样式。

有人可以解释为什么会发生这种情况。

【问题讨论】：

也许您的逗号令人不安？ @media (min-width: 480px) and (max-width: 950px) {...}

标签： css media-queries

【解决方案1】：

如果此属性与 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)

【讨论】：