CSS max-width 的像素精度不准确

Question

我对

max-width

媒体规则有疑问。我测试隐藏不同

max-width

值上的元素，但行为不一致。我测试了 4 个不同屏幕宽度的场景。

场景1：屏幕宽度为638px：这符合我的预期。
场景2：屏幕宽度为639px：这是错误的！我预计
```
column639
```
仍会被隐藏！
场景3：屏幕宽度为640px：这符合我的预期。
场景4：屏幕宽度为641px：这符合我的预期。

问题：

导致场景 2 中像素不准确的原因以及为什么

639px

值的处理方式与其他值不同？

重现性：

奇怪的是，它不能在任何地方重现（将窗口大小调整为

693px

的宽度：

Google Chrome：我可以重现，(
```
86.1.6938.200
```
,
```
64-bit
```
)
Mozilla Firefox：我可以重现，(
```
87.0.4280.88
```
,
```
64-bit
```
)
JSFiddle：我无法重现（所有场景均按预期）： https://jsfiddle.net/vop23ang/
CodePen：我可以重现（所有场景均按预期，您需要更改视图以水平调整大小）：https://codepen.io/nikolas-charalambidis/pen/YzGYPGE

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <h1>max-width issue</h1>
        <div class="column column639">
            <h2>Column 1</h2>
        </div>
          
        <div class="column column640">
            <h2>Column 2</h2>
        </div>
    </body>
</html>

.column {
    width: 100%;
    background-color: cyan;
}

@media screen and (max-width: 639px) {
    .column639 {
        visibility: hidden;
    }
}

@media screen and (max-width: 640px) {
    .column640 {
        visibility: hidden;
    }
}

场景：

场景1：屏幕宽度为

638px

：

场景2：屏幕宽度为

639px

：

场景3：屏幕宽度为

640px

：

场景4：屏幕宽度为

641px

：

Answer 1

这已被报告并接受为可在多个版本上重现的错误。目前，开发团队正在审核中。

关注问题#1162102以获取更多详细信息，但是，一旦问题解决，我将更新答案。

编辑：分辨率无法修复。 640px 边界的行为据说是不幸的：https://issues.chromium.org/issues/40162653#comment37

作为非 FE 开发人员，我不知道该怎么做......

Answer 2

max-width

包括您提供的宽度限制：

equal or narrower

。

例如，仅当浏览器的视口宽度等于或小于 12450px 时，此 CSS 才会应用样式：

@media (max-width: 12450px) { ... }

文档

我做了一个 codepen 来测试它。尝试一下。

结果正如我所料......

CSS max-width 的像素精度不准确

问题描述投票：0回答：2

2个回答

最新问题

CSS max-width 的像素精度不准确

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2