CSS本机变量在媒体查询中不起作用

小编典典

all

我正在尝试在媒体查询中使用 CSS 变量，但它不起作用。

:root {
  --mobile-breakpoint: 642px;
}

@media (max-width: var(--mobile-breakpoint)) {

}

阅读 81

2022-05-16

共1个答案

小编典典

从规格，

该var()函数可用于代替元素上任何属性中值的任何部分。该var()函数不能用作属性名称、选择器或除属性值之外的任何其他内容。（这样做通常会产生无效的语法，否则会产生与变量无关的值。）

所以不，你不能在媒体查询中使用它。

这是有道理的。因为可以设置--mobile-breakpointeg
为:root，即<html>元素，并从那里继承到其他元素。但是媒体查询不是一个元素，它不继承自<html>，所以它不能工作。

这不是 CSS 变量试图完成的任务。您可以改用 CSS 预处理器。

2022-05-16