Safari 忽略低于某个点的 css max-width 媒体查询
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15976751/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Safari ignoring css max-width media queries below a certain point
提问by joshcartme
I'm working on optimizing a responsive site and Safari (both desktop and mobile) seems to be completely ignoring media queries below a certain point. I have code like the following:
我正在优化响应式网站，而 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 and Chrome both respond appropriately. Does anyone have any ideas about what is going on?
Firefox 和 Chrome 都做出了适当的响应。有没有人对正在发生的事情有任何想法？
You can see the site here: http://kgillingham.webfactional.com. What should happen (and works on FF and Chrome) is that as the site becomes less than 640px the header font in the slider should become a smaller size.
您可以在此处查看该站点：http: //kgillingham.webfactional.com。应该发生的事情（并且适用于 FF 和 Chrome）是，当网站变得小于 640 像素时，滑块中的标题字体应该变得更小。
edit: The site has now been updated to use javascript to add a class when the size is less than 640px. That class always uses the smaller font size. This means that it works as expected now, but I would much rather use CSS media queries than javascript so I would still like to see a solution.
编辑：该站点现已更新为在大小小于 640px 时使用 javascript 添加类。该类始终使用较小的字体大小。这意味着它现在可以按预期工作，但我更愿意使用 CSS 媒体查询而不是 javascript，所以我仍然希望看到解决方案。
采纳答案by joshcartme
Turns out I was missing a squiggly brace, so I had code like the following:
原来我缺少一个波浪形大括号，所以我有如下代码：
@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 */
}
Inserting the missing brace caused Safari to begin working. Other browsers didn't choke on the error which is partially why it was so difficult to track down.
插入缺失的大括号导致 Safari 开始工作。其他浏览器并没有因为这个错误而窒息，这就是为什么很难追踪的部分原因。
Thanks for the help everyone, I feel pretty silly now.
谢谢大家的帮助，我现在觉得很傻。
回答by Ol Sen
@media rules are the same concept as normal css rules, the latest rule overwrites the first one. but if a rule is different it would not overrule it.
@media 规则与普通 css 规则的概念相同，最新的规则会覆盖第一个。但如果规则不同，它不会推翻它。
you could make a workaround by typing, this code would just interpreted by webkits
你可以通过输入来解决这个问题，这段代码只会被 webkits 解释
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* put webkit CSS here*/
}
