Html 媒体查询以错误的宽度触发
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26696254/
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
Media Queries firing at wrong width
提问by swollavg
I am building a responsive page and the media queries are firing at the wrong width size. I am using Chrome.
我正在构建一个响应式页面，媒体查询以错误的宽度大小触发。我正在使用 Chrome。
@media screen and (max-width: 1200px) {
.logo-pic {
display: none;
}
}
For example, this rule works it just fires at wrong size. This rule fires at 1320px and not 1200px. I have the meta tag for html in place. It seems to be firing the media query 100 or so pixel wider than it normall should.
例如，此规则仅以错误的大小触发。此规则在 1320 像素而不是 1200 像素处触发。我有 html 的元标记。它似乎触发了比正常情况更宽 100 像素左右的媒体查询。
<meta name="viewport" content="width=device-width, initial-scale=1">
I checked the previous responsive site I made and those breakpoints are firing correctly. I've tested the browser on different websites and the media queries are fine as well.
我检查了我之前创建的响应式站点，这些断点正确触发。我已经在不同的网站上测试了浏览器，媒体查询也很好。
I found a similiar question on stack overflow but it went unanswered.
我发现了一个关于堆栈溢出的类似问题，但没有得到解答。
Media Queries breakpoint at wrong value
Not sure what the problem is?
不确定是什么问题？
回答by davidcondrey
A common reason this happens is if you have zoomed the browser window to a size other than 100%. In your browser, select the drop-down menu 'View' and make sure it is set to 100%. If you are zoomed in or out, it will trigger media-queries inappropriately.
发生这种情况的一个常见原因是您将浏览器窗口缩放到 100% 以外的大小。在您的浏览器中，选择下拉菜单“查看”并确保将其设置为 100%。如果放大或缩小，它会不恰当地触发媒体查询。
And don't worry about feeling embarrassed. It has probably happened, or will happen to everyone.. but only once.
并且不要担心感到尴尬。它可能已经发生，或者会发生在每个人身上……但只有一次。
In order to avoid this issue all together, you should considering defining your media queries using a relative units (emor remrather than px).
为了一起避免这个问题，您应该考虑使用相对单位（em或rem而不是px）来定义媒体查询。
You can also enforce setting the browser zoom level to 100% on page load using javascript.
您还可以使用 javascript 在页面加载时强制将浏览器缩放级别设置为 100%。
document.body.style.webkitTransform = 'scale(1)';
document.body.style.msTransform = 'scale(100)';
document.body.style.transform = 'scale(1)';
document.body.style.zoom = screen.logicalXDPI / screen.deviceXDPI;
回答by Pieter
Just a short addition, to prevent others from searching further even though the answer is given here.
只是一个简短的补充，以防止其他人进一步搜索，即使这里给出了答案。
My zoom was already set to 100%, and still the issue was there. If you experience the same, the answer is simple: set your zoom to 90% and back to 100%, et voila, breakpoints on the width you want 'm.
我的缩放已经设置为 100%，但问题仍然存在。如果您遇到相同的情况，答案很简单：将缩放比例设置为 90%，然后再回到 100%，等等，在您想要的宽度上设置断点。
回答by Pouki
Do you have iframes (or modals or smaller windows) loading the same CSS sheet with your media query ? If it's the case, it's a cache problem, and you need to link the CSS file with a dumb param like :
您是否有 iframe（或模态或较小的窗口）使用媒体查询加载相同的 CSS 表？如果是这种情况，则是缓存问题，您需要将 CSS 文件链接到一个愚蠢的参数，例如：
<link href="myCss.css?iframe=1" />
In order to load the css file as a new file instead of taking the cached version ... I hope I'm clear :)
为了将 css 文件作为新文件加载而不是采用缓存版本......我希望我很清楚:)
回答by Amir
Another addition. After an hour of debugging I realized I had coded multiple media queries and because css files are executed from top to bottom, I was overriding previous media query logic. Ex:
另一个补充。经过一个小时的调试，我意识到我编写了多个媒体查询，并且因为 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; }
};
回答by agm1984
Take a look at your units: rem, em, px.
看看你的单位：rem, em, px。
I just had this issue and it was because my base font-size is 10px and I put max_width: 102.4remin the media query, but it is activating at around 1600px instead of expected 1024px.
我刚刚遇到了这个问题，这是因为我的基本字体大小是 10max_width: 102.4rem像素，并且我输入了媒体查询，但它在 1600 像素左右而不是预期的 1024 像素处激活。
It still activates at 1600px on mine with 102.4em, but it works as expected when I use 1024px.
它仍然在我的 1600px 上激活102.4em，但是当我使用1024px.
Here is an article that talks about everything I am hinting at:
这是一篇文章，讨论了我所暗示的一切：
https://zellwk.com/blog/media-query-units/
https://zellwk.com/blog/media-query-units/
I missed the top voted answer at first because I experienced the problem using remnot px. Clearly, the root of the problem appears to be the units though.
起初我错过了投票最高的答案，因为我在使用remnot 时遇到了问题px。显然，问题的根源似乎是单位。
回答by AdheneManx
I ended up on this thread after an hour of frustration, in the end I realised I'd accidentally used min-height instead of min-width:
经过一个小时的沮丧之后，我最终在这个线程上结束了，最后我意识到我不小心使用了 min-height 而不是 min-width：
@media screen and (min-height: $sm) { }
instead of...
代替...
@media screen and (min-width: $sm) { }
Just a reminder to quickly check it if you were having the same issue as me face palm, it's late.
只是提醒一下，如果您遇到与我的手掌相同的问题，请快速检查一下，已经晚了。
回答by Markus Hein
I also had some problems with media queries in Chrome.
我在 Chrome 中的媒体查询也遇到了一些问题。
As soon as I toggled device toolbar, the scaling was just wrong. The following
我一切换设备工具栏，缩放比例就错了。下列
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
fixed this issue.
修复了这个问题。
