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

由于没有 "only" 这样的媒体类型，旧版浏览器应忽略样式 sheet。

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

这是 1 种可能的解释

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

Css media queries not works in Safari browser

html

css

safari

cross-browser

media-queries