我正在构建一个响应式页面，但是媒体查询在错误的宽度大小下触发。我正在使用Chrome浏览器。
@media screen and (max-width: 1200px) {
.logo-pic {
display: none;
}
}
<meta name="viewport" content="width=device-width, initial-scale=1">
我检查了之前制作的响应式网站，这些断点正确触发。我已经在不同的网站上测试了浏览器，媒体查询也没问题。
我在Stack Overflow上找到了一个类似的问题，但是没有得到解答。
Media Queries breakpoint at wrong value
不确定问题出在哪里？
出现这种情况的常见原因是您将浏览器窗口缩放至100%以外的大小。在您的浏览器中，选择下拉菜单“查看”并确保它设置为100％。如果您进行了放大或缩小操作，则会不适当地触发媒体查询。
不要担心感到尴尬。 这可能已经发生，或者将会发生在每个人身上......但只有一次。
为了彻底避免这个问题，您应该考虑使用相对单位（em或rem）来定义您的媒体查询，而不是px。
您也可以使用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;
Ctrl键并按+键可以放大屏幕，按-键可以缩小屏幕。在Mac上，按住command键并按+键可以放大屏幕，按-键可以缩小屏幕。 - mogelbuster补充一点，防止其他人继续搜索尽管问题已经得到解答。
我的缩放已经设置为100％，但问题仍然存在。如果您遇到相同的问题，解决方法很简单：将缩放设置为90％，然后再设置回100％，即可在您想要的宽度上设置断点。
另一个需要注意的地方是，我在调试了一小时后才意识到我的代码中有多个媒体查询，并且由于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; }
};
<meta name="viewport" content="width=device-width, initial-scale=1">
https://css-tricks.com/forums/topic/best-media-query-excluding-scroll-solution/
有两种解决方案：html {
overflow: hidden;
height: 100%;
}
body {
height: 100%;
overflow-y: scroll;
position: relative;
}
这个答案有点“hacky”，正如文章所提到的那样，即使所有内容都适合屏幕，它也会在屏幕上永久显示滚动条。因此，我不是很喜欢这种方法。
你也可以使用JS解决方案来解决这个问题。该文章给出了一个处理此问题的git仓库链接。
最后，文章中没有提到的是，如果不需要非常精确的滚动条位置，你可以通过将媒体查询规则添加几个像素来解决。如果需要非常精确，则JS解决方案是最好的选择。
您是否有使用iframe（或模态框或较小的窗口）加载具有媒体查询的相同CSS样式表？如果是这种情况，那么这是一个缓存问题，您需要像这样链接CSS文件：
<link rel="stylesheet" href="style.css?v=1">其中“v=1”是一个无意义的参数，但它可以使浏览器认为这是一个新的文件，从而避免缓存问题。
<link href="myCss.css?iframe=1" />
@media查询读取的是_iFrame容器_的宽度而不是_window_的宽度。这意味着计算时需要考虑父容器的大小+外边距、内边距和容器与窗口边缘之间的任意宽度。可以通过在开发人员面板中查看iFrame容器的宽度计算来测试。在Chrome的响应式模式下查看时很容易忘记这一点。 - Edward作为一名有用的助手，我会尽力将以下内容翻译为中文：
由于没有一个答案能够解决我的问题，我想分享我的解决方案:
我已经将滚动条的宽度设置为10像素(在火狐浏览器中是“thin”)，窗口的计算宽度没有考虑到滚动条增加的宽度，因此我的断点比指定的@media查询要小10像素。
为了解决这个问题，我只需在查询中添加10像素(滚动条的宽度)，即：
@media (max-width: 600px)
into:
@media (max-width: 610px)
愉快的编码！
https://zellwk.com/blog/media-query-units/
起初，我错过了最高票答案，因为我使用的是rem而不是px。显然，问题的根源似乎是单位。在经历了一个小时的挫折后，我最终发现我错误地使用了min-height而不是min-width。
@media screen and (min-height: $sm) { }
而不是...
@media screen and (min-width: $sm) { }
提醒大家快速检查，如果你和我一样遇到了同样的问题 face palm，现在已经很晚了。
document.body.clientWidth或jQuery的$(window).width()相反，完全像window.innerWidth）。window.innerWidth一致。否则，您将降到溢出黑客的水平，您不想走进这个兔子洞。
.logo-pic规则覆盖吗？当您检查.logo-pic元素时，样式检查器显示应用或覆盖的规则是什么？ - user663031Ctrl+0返回至100%。 - ckuijjer