css - 媒体查询关闭 1px

标签 css media-queries

我把它放在我的 CSS 中:

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

所以我希望它在屏幕宽度为 767px 或更小时触发。但是,它不适用于 767px,仅适用于 766px 及以下。为什么关闭 1px?

更新:

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

看看site如果你喜欢。

最佳答案

我发现如果我在 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

关于css - 媒体查询关闭 1px,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52512272/

相关文章:

javascript - 从 matrix3d 获取精确的旋转 Angular

css - 在 Bootstrap 4 中单击 DropdownItem 列表时如何更改 DropdownToggle 背景颜色

html - 位置相对和权利属性(property)

javascript - 在 Firefox OS 上创建原生 UI 的推荐方法是什么?

html - 如何将移动 css 查询应用于带有背景图像的 div?

html - @media 查询在我的 iPad 上不起作用

html - 白皮书 : How to center two images (they change by hover effect)?

html - 如何根据不同的屏幕宽度缩放我的网站

iphone - 如何在 iPhone 中隐藏 CSS,而不是在其他浏览器中隐藏?

html - 最小宽度和最大宽度 css 媒体查询