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！