以错误宽度触发的媒体查询
以错误宽度触发的媒体查询
提问于 2014-11-02 13:07:55
我正在构建一个响应式页面，但媒体查询的宽度大小不正确。我使用的是Chrome。
@media screen and (max-width: 1200px) {
.logo-pic {
display: none;
}
}例如，这个规则是有效的，它只是在错误的大小下触发。此规则以1320px而不是1200px触发。我已经准备好了html的meta标签。它似乎正在触发媒体查询，比正常情况下更宽100个像素左右。
<meta name="viewport" content="width=device-width, initial-scale=1">我检查了我之前创建的响应站点，这些断点都是正确触发的。我已经在不同的网站上测试了浏览器，媒体查询也很好。
我在堆栈溢出上发现了一个类似的问题，但没有得到回答。
Media Queries breakpoint at wrong value
不确定问题出在哪里？
回答 8
Stack Overflow用户
发布于 2017-10-03 20:57:06
只是一个简短的补充，以防止其他人进一步搜索，即使这里给出了答案。
我的缩放已经设置为100%，但问题仍然存在。如果你有同样的体验，答案很简单:将你的缩放设置为90%，然后再调回100%，瞧，你想要的宽度上的断点。
Stack Overflow用户
发布于 2019-03-01 09:02:45
又增加了一项。经过一个小时的调试，我意识到我已经编写了多个媒体查询，因为css文件是从上到下执行的，所以我覆盖了以前的媒体查询逻辑。例如：
@media (max-width: 700px) {
.some-class { background-color: red; }
};
// This will override the above styling (assuming max-width logic is true)
@media (max-width: 800px) {
.some-class { background-color: yellow; }
};Stack Overflow用户
发布于 2014-11-03 15:58:53
你有没有让iframe(或者modals或者更小的窗口)在你的媒体查询中加载相同的CSS表？如果是这种情况，则是缓存问题，您需要使用哑巴参数链接CSS文件，如下所示：
<link href="myCss.css?iframe=1" />为了将css文件作为新文件加载，而不是采用缓存的版本...我希望我说得很清楚:)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26696254
复制相关文章
相似问题