Safari忽略某个特定点下的CSS最大宽度媒体查询

我正在努力优化响应网站,Safari(桌面和移动设备)似乎完全忽略了某一点以下的媒体查询.我有如下代码：

@media screen and (max-width: 767px){
    /* Safari responds to css here */
}
@media screen and (max-width: 640px){
    /* css here is ignored by Safari */
}

Firefox和Chrome都会做出适当的响应.有没有人对发生了什么有任何想法？

您可以在这里查看网站：http://kgillingham.webfactional.com.应该发生什么(并且在FF和Chrome上使用)是因为网站变得小于640px,滑块中的标题字体应该变小.

编辑：该网站现在已经更新,使用javascript来添加一个类,当大小小于640px.该类总是使用较小的字体大小.这意味着它现在可以像预期的那样工作,但我更喜欢使用CSS媒体查询而不是javascript,所以我仍然希望看到一个解决方案.

解决方法

原来我错过了一个大括号,所以我有如下代码：

@media screen and (max-width: 767px){
    /* lots of css */
    .some_selector { padding: 20px; /*<---- missing squiggly brace*/
    /* more css */
}
@media screen and (max-width: 640px){
    /* lots more css */
}

插入缺失的大括号导致Safari开始工作.其他浏览器并没有阻止错误,这部分是为什么这么难以跟踪.

感谢大家的帮助,我现在觉得很傻.

Safari忽略某个特定点下的CSS最大宽度媒体查询

解决方法

相关文章