媒体查询关闭 1px

Posted 2023-03-06

【中文标题】媒体查询关闭 1px

【英文标题】：media query is 1px off

【发布时间】：2019-03-01 21:49:55

【问题描述】：

我把它放在我的 CSS 中：

@media (max-width:767px) 
    .home #wrap 
    margin-top: 14px;
    

所以我希望它在屏幕宽度为 767 像素或更小时触发。但是它不适用于 767 像素，仅适用于 766 像素及以下。为什么会差 1px？

更新：

这不是一个重复的问题。另一个线程中的提问者使用 768px 作为最小值和最大值，由于某种原因，他们不明白为什么它们重叠。我使用 767 的最大值和 768 的最小值，不明白为什么不应该有 1px 的间隙。

如果您愿意，请查看site。

【问题讨论】：

请出示正确的minimal reproducible example。这可能是与***.com/a/48559799/10283047 类似的问题，或者完全是其他问题。到目前为止，您提供的信息无法判断。

然后添加 768.. 如果它像那样工作..

@ArupRakshit 先生，这是这个问题的完美答案..

the 1px gap when using min and max with media queries的可能重复

@ReddaJoppe，你解决了吗？编辑：我遇到了完全相同的问题。解决方案：使用@media screen and (max-device-width: 767px)。为什么：对我来说，它必须使用 Windows 屏幕缩放。我的屏幕分辨率设置为 1920x1080，但我将它放大了 125%，当我使用 max-width 时它不起作用，但后来我发现 max-device-width 并且成功了。

【参考方案1】：

我发现，如果我在 devtool 宽度框中逐一减小像素大小，然后在控制台记录 window.innerWidth，它会显示可能是数学舍入问题。

DevBoxWidth | window.innerWidth
770px | 770px
**769px | 770px**
768px | 768px
767px | 767px
766px | 766px
**765px | 766px**
764px | 764px
763px | 763px
762px | 762px
**761px | 762px**
760px | 760px