CSS媒体查询重叠的规则是什么？

Question

我们如何准确地间隔媒体查询以避免重叠？例如，如果我们考虑以下代码：@media (max-width: 20em) {    /* for narrow viewport */}@media (min-width: 20em) and (max-width: 45em) {    /* slightly wider viewport */}@media (min-width: 45em) {    /* everything else */}在所有支持的浏览器上，分别以20em和45em会发生什么？我见过人们在使用：像799px然后是800px之类的东西，但是屏幕宽度为799.5 px呢？（显然不是在常规显示器上，而是在视网膜显示器上？）考虑到规格，我对此最好奇。

Answer 1

我已经尝试按照这里的建议：

@media screen and (max-width: calc(48em - 1px)) {

    /*mobile styles*/

}

@media screen and (min-width: 48em) {

    /*desktop styles*/

}

但是发现这不是一个好主意，因为它目前无法在Chrome上在我的Ubuntu桌面或Android手机上运行。（如此处所述：calc（）在媒体查询中不起作用）但是，我发现了一种更好的方法...

@media screen and (max-width: 47.9999em) {

    /*mobile styles*/

}

@media screen and (min-width: 48em) {

    /*desktop styles*/

}

和ba！