视网膜 css 不工作答案

【问题标题】：Retina css isn't working视网膜 css 不工作
【发布时间】：2015-08-22 14:36:36
【问题描述】：

在使用媒体查询更改字体粗细时遇到问题。所以，我只为 Retina 使用font-weight: 100;。 font-weight: 300 用于 PC。

这是我的 CSS：

@media all and (-webkit-min-device-pixel-ratio : 2) {
a {
    font-weight: 100;
}
}
a {
    font-weight: 300;
}

浏览器只是忽略 @media 并使用 font-weight: 300

【问题讨论】：

在哪个浏览器中？您在测试设备上使用哪种分辨率？
@connexo，我正在测试 safari 和 chrome
@connexo，我在 macbook 视网膜显示器上测试了它

标签： css media-queries retina-display retina

【解决方案1】：

您需要在一般定义之后应用您的媒体查询 CSS，因为媒体查询没有比非媒体查询 CSS 规则更高的特异性。

另外，你忘了把你的媒体查询的右括号，所以这两个 css 规则都属于媒体查询并被应用，后一个“获胜”。修复它：

a {
    font-weight: 700;
}
@media all and (-webkit-min-device-pixel-ratio : 2) {
    a {
        font-weight: 100;
    }
} /* <- close your media query properly */

然后就可以了。

编辑：

它似乎仍然不适合您的原因（它确实）也可能是这两种字体粗细之间的显示没有区别。尝试应用 700 和 100，你会发现它有效。

http://codepen.io/anon/pen/xGdpEy

【讨论】：

对不起，为了混淆，实际上我在代码中有这个，只是在这里错过了。还是不行
仍然无法工作 :( 浏览器忽略@media，如果我把@media 放在上面，@media css 可以工作，如果我把简单的a { ... } 放在上面 - 它可以工作。
我在 Chrome 和 Safari（均为最新版本）中检查了我的 MBP Retina 2013 年末 @1920x1200 和 2840x1800。它确实在这里完美运行。
你重新检查了吗？另外，您是如何发现您的浏览器忽略了媒体查询中的样式定义的？从外观上看，或者您是否检查过 Chrome 开发者工具？