时间戳

首页 > 解决方案 > 为什么在使用媒体查询时需要为最大高度添加额外的像素？

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

问题描述

我在 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的背景色，但是当我检查窗口高度时它显示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;
    }
}

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

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

标签： cssmedia-queries

解决方案

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

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

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

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

推荐阅读