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

Question

我这里有这个代码运行，分辨率为 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;
  }
}

<div id="d1"></div>

当我没有打开书签栏时，d1 的背景颜色是 hotpink，但是当我检查 window 高度时它显示 850px，当我打开书签栏时，window 高度为 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;
    }
}

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

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

Answer 1

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

可能发生的情况是，即使开发工具说您的 window 高 850 像素，它也可能是 850.25 像素高。

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

（请记住，由于放大，整个视口被除以 225%，因此数学结果不太可能是整数...）

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

Why do I need to add an extra pixel for a max height when using media queries?

css

media-queries