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

一尘不染

css

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

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

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

}

阅读 429

2020-05-16

共1个答案

一尘不染

从规格，

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

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

这是有道理的。因为您可以将--mobile-breakpoint例如设置为:root，即<html>元素，然后从那里继承其他元素。但是媒体查询不是元素，它也不继承自<html>，因此它无法工作。

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

2020-05-16