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

Question

假设我有这个:

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

这意味着 600.5 等宽度的未定义行为，这是 HiDPI 显示器上可能的逻辑宽度。 min-width、max-width 等的问题在于它们是弱不等式(分别为 >= 和 <=)。如何在 CSS 媒体查询(> 和 <)中实现严格不等式？

Answer 1

文档的宽度将始终四舍五入为 px 中的整数。如果您对细节感兴趣，可以阅读this article .

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

// set width to 600.5px:
document.querySelector('body').style.width = '600.5px';

// get actual width:
console.log('600.5px gets parsed to ' + document.querySelector('body').offsetWidth);

// set width to 600.4999px:
document.querySelector('body').style.width = '600.4999px';

// get actual width
console.log('600.4999px gets parsed to ' + document.querySelector('body').offsetWidth);

这在技术上意味着 @media (max-width:600px) 适用于文档宽度等于或小于 600.49994(9)px 时。实际上，它从来没有小数宽度。