Question

注意：可能与here重复（我使用相同的解决方案找到了更多答案），但这并没有解决我的问题。

您好，我希望在屏幕尺寸不同时更改某些元素的颜色，这是我的CSS规则，他们会告诉您所有我希望：

#my_div {
    height: 5px;
    background-color: #08c5ef;
    width: 100%;
}

@media only screen and (max-width: 1100px) {
    #my_div {
        background-color: red;
    }
}

@media only screen and (min-width: 1200px) {
    #my_div {
        background-color: green;
    }
}

它适用于除Safari（5.1.7）以外的所有浏览器，该行始终为绿色。有人能帮助我吗？也许我写了错误的媒体查询？

Answer 1

关键字“only”也可用于隐藏旧用户代理的样式表。用户代理必须处理以“仅”开头的媒体查询，就好像“仅”关键字不存在一样。

由于没有“仅”这样的媒体类型，旧版浏览器应该忽略样式表。

Safari（5.1.7）现在已经很老了，我们达到8.0.5

这是一个可能的解释

Css媒体查询在Safari浏览器中不起作用

1 个答案: