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

这是1个可能的解释