CSS最大宽度的像素精度不准确

本文介绍了CSS最大宽度的像素精度不准确的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我对 max-width 媒体规则有疑问.我测试将元素隐藏在不同的 max-width 值上，并且行为不一致.我已经测试了4种不同屏幕宽度的场景.

场景1 :屏幕宽度为638px:这符合我的期望.
方案2 :屏幕宽度为639px:这是错误的！我希望 column639 仍然被隐藏！
方案3 :屏幕宽度为640px:这符合我的期望.
场景4 :屏幕宽度为641px:这符合我的期望.

问题:

是什么原因导致方案2 中的像素不准确?为什么 639px 值与其他值区别对待?

可重复性:

奇怪的是，它不能在任何地方复制(将窗口的大小调整为 693px :

Google Chrome:我可以复制( 86.1.6938.200 ， 64位)
Mozilla Firefox:我可以复制( 87.0.4280.88 ， 64位)
JSFiddle:我无法复制(所有场景均符合预期):
方案2:屏幕宽度为 639px :
情况3:屏幕宽度为 640px :
方案4:屏幕宽度为 641px :
解决方案
已被报告并接受为可在多个版本上重现的错误.目前，开发团队正在对其进行审核.
按照问题#1162102 进行详细了解，但是，一旦问题解决，我将更新答案.
I have an issue with max-width media rule. I test to hide the elements on different max-width values and the behavior is inconsistent. I have tested 4 scenarios varying in the screen width.
- Scenario 1: Screen width is 638px: This matches my expectation.
- Scenario 2: Screen width is 639px: This is wrong! I expect column639 still to be hidden!
- Scenario 3: Screen width is 640px: This matches my expectation.
- Scenario 4: Screen width is 641px: This matches my expectation.
Question:
What causes the pixels inaccuracy in the Scenario 2 and why is 639px value treated differently than others?
Reproducibility:
Strangely, it cannot be reproduced everywhere (resize the window to the width of 693px:
- Google Chrome: I can reproduce, (86.1.6938.200, 64-bit)
- Mozilla Firefox: I can reproduce, (87.0.4280.88, 64-bit)
- JSFiddle: I cannot reproduce (all scenarios as expected):https://jsfiddle.net/vop23ang/
- CodePen: I can reproduce (all scenarios as expected, you need to Change View to resize horizontally): https://codepen.io/nikolas-charalambidis/pen/YzGYPGE
Code:
```
<!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;
    }
}
```
Scenarios:
Scenario 1: Screen width is 638px:
Scenario 2: Screen width is 639px:
Scenario 3: Screen width is 640px:
Scenario 4: Screen width is 641px:
解决方案
This was reported and accepted as a bug reproducible on multiple versions. Currently, it's on review by the development team.
Follow the issue #1162102 for more details, however, I will update the answer once the issue is resolved, though.

这篇关于CSS最大宽度的像素精度不准确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

and

CSS最大宽度的像素精度不准确

问题描述