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

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

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

Safari(5.1.7) 已经很老了，我们到了 8.0.5

这是一种可能的解释