CSS最大宽度的像素精度不准确 [英] CSS max-width has inaccurate pixel precision
问题描述
我对 max-width 媒体规则有疑问.我测试将元素隐藏在不同的 max-width 值上，并且行为不一致.我已经测试了4种不同屏幕宽度的场景.
- 场景1 :屏幕宽度为638px:这符合我的期望.
- 方案2 :屏幕宽度为639px:这是错误的！我希望
column639仍然被隐藏！ - 方案3 :屏幕宽度为640px:这符合我的期望.
- 场景4 :屏幕宽度为641px:这符合我的期望.
问题:
是什么原因导致方案2 中的像素不准确?为什么 639px 值与其他值区别对待?
可重复性:
奇怪的是，它不能在任何地方复制(将窗口的大小调整为<code> 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-widthmedia rule. I test to hide the elements on differentmax-widthvalues 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
column639still 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
639pxvalue 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最大宽度的像素精度不准确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
