为什么在使用媒体查询时需要为最大高度添加额外的像素？答案

【问题标题】：Why do I need to add an extra pixel for a max height when using media queries?为什么在使用媒体查询时需要为最大高度添加额外的像素？
【发布时间】：2020-09-18 18:51:25
【问题描述】：

我在 3840x2160 上以 225% 缩放运行此代码

#d1 {
  height: 400px;
  width: 275px;
  background-color: hotpink;
}

@media (max-height: 850px) {
  #d1 {
    height: 400px;
    width: 275px;
    background-color: green;
  }
}

@media (max-height: 818px) {
  #d1 {
    height: 400px;
    width: 275px;
    background-color: purple;
  }
}

&lt;div id="d1"&gt;&lt;/div&gt;

当我没有打开书签栏时，d1会有hotpink的背景色，但是当我检查窗口高度时它显示850px，当我显示书签栏时，窗口高度是818px，然后是d1背景颜色变为绿色。

现在如果我在最大高度上再增加 1 个像素

@media (max-height: 851px) {
    #d1 {
        height: 400px;
        width: 275px;
        background-color: green;
    }
}

@media (max-height: 819px) {
    #d1 {
        height: 400px;
        width: 275px;
        background-color: purple;
    }
}

然后当我隐藏书签栏时，我得到绿色的背景颜色，当我显示书签栏时，背景颜色变成紫色。

所以我的问题是，为什么我需要在最大高度上添加一个额外的像素才能使其正常工作？

【问题讨论】：

这是特定于浏览器（例如chrome）还是所有浏览器？
我只在 Chrome 中检查过
#d1 有边框吗？你检查了它的盒子尺寸吗？
我不知道这有多大帮助，但您是否尝试过使用 vh 代替？书签栏不应该是视口的一部分。在这里使用vh 可能有用
您必须考虑浏览器的像素值四舍五入。 850.25px 大于 850px 但会向下舍入为 850px。还取决于浏览器如何实现“@media”计算。 BTW Chrome = Edge（截至 2020 年），它们共享相同的代码库...

标签： css media-queries

【解决方案1】：

浏览器倾向于...不使用整数。

即使开发工具说你的窗口是 850 像素高，它也可能是 850.25 像素高。

因此，由于 850.25px 大于 850px，媒体查询不会触发。

（请记住，自从您放大后，您的整个视口被除以 225%，因此数学不太可能得出整数...）

【讨论】：