Html CSS媒体查询中的严格不等式

假设我有这个：

@media only screen and (max-width: 600px) {
    nav {
        display: none;
    }
}
@media only screen and (min-width: 601px) {
    nav {
        display: block;
    }
}

---

这意味着宽度（如600.5）的行为未定义，这是HiDPI diplays上可能的逻辑宽度。

min width

、

max width

等的问题在于它们是弱不等式（>=和文档的宽度在

px

中总是四舍五入到整数。如果您对细节感兴趣，可以阅读

让我们做一个简单的测试：

//将宽度设置为600.5px：
document.querySelector（'body'）.style.width='600.5px'；
//获取实际宽度：
log（'600.5px被解析为'+document.querySelector（'body'）.offsetWidth）；
//将宽度设置为600.4999px：
document.querySelector（'body'）.style.width='600.4999px'；
//获取实际宽度
console.log（'600.4999px被解析为'+document.querySelector（'body'）.offsetWidth）

你确定吗？这是我几天前遇到的一个真正的问题，当时我有一个移动导航栏设置为显示：none for width>=601，桌面导航栏设置为display:none for width我猜你没有读过。我无法将文档的宽度设置为一个值，当

width

设置在两者之间时，该值同时显示两个div。呵呵无论如何，看起来CSS断点是在

0

上，而不是像我原来想的那样在

0.5

上。我会在做更多测试后更新我的答案，阅读更多文档-以了解为什么会这样。我发现了这篇文章。似乎非100%缩放也会触发此问题。是否环绕viewpor取决于浏览器t计算媒体查询时的宽度。

getBoundingClientRect（）。宽度

是可以有小数位的原始宽度（这可能是浏览器用于计算媒体查询的宽度），而从你提到的链接来看，

clientWidth

给出了那篇文章所建议的itSo的整数取整版本，解决这个问题的最好方法是只使用

minwidth

或只使用

max width

，并默认设置其中一个

display:none

，然后在一个媒体查询中切换它们遗憾的是，在严格的不平等性的帮助下，没有清晰简单的方法做到这一点。请善待新用户，不要对合法的问题投反对票。我能够实现小数宽度。我一直认为在我真正面对这个问题之前，它是四舍五入到整数的。以下是证据：