Question

说我有这个：

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

这意味着宽度类似于600.5的未定义行为，这是HiDPI diplay上可能的逻辑宽度。 min-width，max-width等的问题在于它们是弱不等式（分别为＆gt; =和＆lt; =）。如何在CSS媒体查询中实现严格的不等式（＆gt;和＆lt;）？

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的情况。在实践中，它从不具有小数宽度。

CSS媒体查询严格不平等

1 个答案: