相关疑难解决方法(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:

:root { --color: blue; }
div { --color: green; }
#alert { --color: red; }
* { color: var(--color); }

我的标记是:

<p>I inherited blue from the root element!</p>
<div>I got green set directly on me!</div>
<div id="alert">
  While I got red set directly on me!
  <p>I’m red too, because of inheritance!</p>
</div>

我的问题是上面的CSS是否转化为:

body {
  color: blue;
}
div {
  color: green;
}
#alert{
  color: red;
}

还是有额外的

* {
  color: red;
}

没有变量,通用选择器在所有元素上应用相同的CSS.这会改变,造型又取决于元素吗？

我还有一个问题是如果:root转换为bodyCSS. …

在我在网上阅读的所有资料中,似乎CSS自定义属性和CSS变量是相同的.但是,在Mozilla Developer Network文档的"CSS变量的继承"部分的示例结尾处,有一个令人困惑的声明:

请记住,这些是自定义属性,而不是实际的CSS变量.该值在需要时计算,不存储以用于其他规则.例如,您不能为元素设置属性,并期望在兄弟的后代规则中检索它.该属性仅为匹配选择器及其后代设置,就像任何普通的CSS一样.

这让我觉得这两个概念不是同义词.

自定义属性和变量之间有什么区别？