相关疑难解决方法(0)

我们如何准确地隔离媒体查询以避免重叠？

例如,如果我们考虑代码:

@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像素呢？(显然不是常规显示器,而是视网膜显示器？)

考虑到规格,我对这里的答案最感兴趣.

级联是使CSS特别强大的原因.但在媒体查询的情况下,重叠可似乎有问题.

考虑以下CSS(CSS媒体查询重叠的连续规则):

/* Standard - for all screens below 20em */

body { color: black; font-size: 1em; }

/* Query A - slightly wider, mobile viewport */

@media (min-width: 20em) and (max-width: 45em) {
    body { color: red; } /* supposed to be unique for this width */
}

/* Query B - everything else */

@media (min-width: 45em) {
    body { font-size: larger; } /* because viewport is bigger */
}

因此,当屏幕正好是45em宽时,45em处的重叠将 …