Question

我正在构建一个响应式页面，并且媒体查询以错误的宽度大小触发。我正在使用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

不确定是什么问题？

Answer 1

发生这种情况的一个常见原因是，您将浏览器窗口缩放到100％以外的大小。在浏览器中，选择下拉菜单＆＃39;查看＆＃39;并确保它设置为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;

Answer 2

只是一个简短的补充，以防止其他人进一步搜索，即使这里给出了答案。

我的缩放已经设置为100％，问题仍然存在。如果您遇到相同的问题，答案很简单：将缩放设置为90％并返回100％，等等，您想要的宽度上的断点＆＃39; m。

Answer 3

您是否有iframe（或模态或更小的窗口）在媒体查询中加载相同的CSS表格？如果是这种情况，则表示存在缓存问题，您需要将CSS文件与以下虚拟参数链接：

<link href="myCss.css?iframe=1" />

为了将css文件作为新文件加载而不是采用缓存版本...我希望我明白：）

Answer 4

另一个补充。经过一个小时的调试，我意识到我已经编码了多个媒体查询，并且由于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; }
};

Answer 5

查看您的单位：rem，em，px。

我刚遇到这个问题，因为我的基本字体大小是10px而我在媒体查询中放了max_width: 102.4rem，但它的激活速度大约是1600px而不是预期的1024px。

我仍然使用102.4em以1600px激活，但是当我使用1024px时，它会按预期工作。

这篇文章讨论了我所暗示的一切：

https://zellwk.com/blog/media-query-units/

我最初错过了最高投票回答，因为我使用rem而不是px遇到了问题。显然，问题的根源似乎是单位。

Answer 6

一个小时的挫败之后，我最终进入了这个线程，最后我意识到我不小心使用了min-height而不是min-width：

elif

而不是...

@media screen and (min-height: $sm) { }

只是提醒您，如果您遇到与我脸部手掌相同的问题，请及时检查一下。

Answer 7

我在Chrome浏览器中的媒体查询也遇到了一些问题。

一旦我切换设备工具栏，缩放比例就是错误的。以下

<meta name="viewport" content="width=device-width, initial-scale=1">

解决了此问题。

Answer 8

这些都不能解决我的问题，但是在弄不清楚为什么在1000px处出现断点后，我的问题是因为我使用了反应响应库，但是我在某些JSX组件中仍然设置了断点！

媒体查询以错误的宽度触发

8 个答案: