Fatal编程技术网
  • css/
  • 视网膜css不'；行不通

视网膜css不'；行不通

css

视网膜css不'；行不通,css,media-queries,retina-display,retina,Css,Media Queries,Retina Display,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，并使用字体重量：300在常规定义之后，您需要应用MediaQuery CSS，因为媒体查

使用媒体查询更改字体大小时出现问题。 因此，我使用
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，并使用字体重量：300
在常规定义之后，您需要应用MediaQuery CSS，因为媒体查询没有比未经MediaQuery CSS规则更高的特殊性

另外，您忘了将媒体查询的右括号括起来，因此这两个css规则都属于媒体查询并得到应用，后者“获胜”。修复它：


a{
字号：700；
}
@媒体全部和（-webkit最小设备像素比：2）{
a{
字号：100；
}

}/*在哪个浏览器中？您在测试设备上使用的分辨率是多少？@connexo，我在safari和chrome@connexo，我在macbook上测试了它，抱歉，让人困惑，实际上我在代码中有这个，只是错过了这里。直到不工作，仍然不能工作：（浏览器忽略@media，如果我把
@media
放在上面，@media css可以工作，如果我把simple
a{…}
放在上面-它可以工作。我在Chrome和Safari（两个最新版本）中检查了2013年底的MBP视网膜@1920x1200和2840x1800。它在这里工作得非常完美。您重新检查了吗？另外，您是如何发现您的浏览器在媒体查询中忽略了您的样式定义的？从外观上看，还是您检查了Chrome Developer Tools？

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