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

Posted 2023-02-21

【中文标题】媒体查询以错误的宽度触发

【英文标题】：Media Queries firing at wrong width

【发布时间】：2014-12-29 01:08:23

【问题描述】：

我正在构建一个响应式页面，并且媒体查询以错误的宽度大小触发。我正在使用 Chrome。

@media screen and (max-width: 1200px) 
 .logo-pic 
    display: none;

例如，此规则有效，它只是以错误的大小触发。此规则在 1320 像素而不是 1200 像素处触发。 我有 html 的元标记。它似乎正在触发媒体查询，它比正常情况下要宽 100 像素左右。

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

我检查了我之前创建的响应式站点，并且这些断点正确触发。我已经在不同的网站上测试了浏览器，媒体查询也很好。

我发现了一个关于堆栈溢出的类似问题，但没有得到解答。

Media Queries breakpoint at wrong value

不确定是什么问题？

【问题讨论】：

会不会和设备像素比有关？

所以它在 1320 而不是在 1321 “触发”？您确定这条规则没有被.logo-pic 的后续规则覆盖吗？当您检查 .logo-pic 元素时，样式检查器会显示哪些规则被应用或覆盖？

请提供网站网址

尝试缩小搜索范围。创建一个新的 html 文件，其中只有一个具有此类的元素和一个指向您的 css 文件的链接。如果它仍然表现错误，你就会知道问题出在 css 的某个地方。

我认为您的浏览器已放大 110% (1200 * 1.10 = 1320)。请尝试按Ctrl+0 恢复到 100%

【参考方案1】：

发生这种情况的常见原因是您将浏览器窗口缩放到 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;

【讨论】：

呃！感谢您节省了我调试 CSS 的时间。我什至没有意识到它被放大了。顺便说一句，至少在 Windows 上的 Chrome 中，你也可以直接按 CTRL-0 来返回 100%。

"你应该考虑使用相对单位来定义你的媒体查询"不，你不会

You can also enforce setting the browser zoom level to 100% on page load using javascript - 这是不好的可访问性/UX，你不应该强制缩放级别

键盘快捷键可以解决这个问题。在 Windows 上按住 Ctrl 并按 + 放大，按 - 缩小。在 Mac 上按住 command 并按 + 放大，按 - 缩小。

【参考方案2】：

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

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

【讨论】：

这一定是chrome的bug。我意识到这是一个可能的问题，并按下 CMD 0 将缩放重置为 100%。这在我使用 CMD + 增加缩放以使其达到 100% 之前不起作用，现在如果我更改缩放 CMD 0 会将其恢复为 100%。

在 Firefox 中类似，我不得不退出自适应视图，然后执行缩放重置

【参考方案3】：

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

【讨论】：

在识别出我的错误后我感到很愚蠢：/。非常感谢。

【参考方案4】：

您是否有 iframe（或模态框或更小的窗口）在您的媒体查询中加载相同的 CSS 表？如果是这种情况，那就是缓存问题，您需要将 CSS 文件与一个哑参数链接，例如：

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

为了将 css 文件加载为新文件，而不是采用缓存版本...我希望我很清楚 :)

【讨论】：

使用 iFrame 的另一个问题是要记住您的 @media 查询读取的是 container 宽度而不是 window 宽度。这意味着计算是父容器 + 边距、填充以及容器和窗口边缘之间的其他任意宽度。这可以通过在开发者面板中查看 iFrame 的容器宽度计算来测试。在 chrome 的响应模式下查看时很容易忘记。

【参考方案5】：

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

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

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

修复了这个问题。

【参考方案6】：

我最近遇到了这个问题，我发现是滚动条导致了这个问题。我找到了与该问题相关的答案：

https://css-tricks.com/forums/topic/best-media-query-excluding-scroll-solution/

提出了 2 个解决方案：

html 
    overflow: hidden;
    height: 100%;


body 
    height: 100%;
    overflow-y: scroll;
    position: relative;

正如文章中提到的那样，这个答案也有点棘手，即使所有内容都适合屏幕，它也会为您留下一个永久滚动条。因此，我不是它的忠实粉丝。

您也可以使用 JS 解决方案来解决这个问题。文章提供了一个处理该问题的 git repo 链接。

最后，文章中没有提到，您可以在您的媒体规则中添加更多像素以适应滚动条，如果它不需要精确的话。如果是这样，那么 JS 解决方案是您的最佳选择。

【参考方案7】：

添加我的解决方案，因为没有一个答案解决了我的问题：

我将滚动条的宽度设置为 10px（在 firefox 中为thin），并且窗口的计算宽度没有考虑滚动条的附加宽度，因此我的断点比指定的 @987654322 薄 10px @查询。

为了解决这个问题，我只是在查询中添加了 10px（滚动条的宽度），转动：

@media (max-width: 600px)

进入：

@media (max-width: 610px)

编码愉快！

【参考方案8】：

看看你的单位：rem、em、px。

我刚遇到这个问题，这是因为我的基本字体大小是 10 像素，我在媒体查询中输入了 max_width: 102.4rem，但它在 1600 像素左右而不是预期的 1024 像素处激活。

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

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

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

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

【参考方案9】：

经过一个小时的挫折后，我最终进入了这个帖子，最后我意识到我不小心使用了 min-height 而不是 min-width：

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

而不是...

@media screen and (min-width: $sm)  

提醒一下，如果您遇到与我相同的问题，请快速检查手掌，已经晚了。

【参考方案10】：

问题在于 Chrome 将始终包含滚动条（与 window.innerWidth 完全一样，与 document.body.clientWidth 或 jQuery 的 $(window).width() 相反）。

您只需要构建您的媒体查询，而不是像素完美，但始终保持与 JavaScript 逻辑中的window.innerWidth 一致。否则，您将陷入困境，并且您不想进入那个兔子洞。

【参考方案11】：

这些都没有解决我的问题，但是我的问题是，在对为什么会在 1000px 处发生断点感到傻眼之后，是因为我使用的是 react-responsive 库，而我仍然在某些 JSX 组件中设置了断点！