CSS本机变量在媒体查询中不起作用
我正在尝试在媒体查询中使用CSS变量,但它不起作用。
:root { --mobile-breakpoint: 642px;
}
@media (max-width: var(--mobile-breakpoint)) {
}
回答:
从规格,
该var()
函数可以代替元素上任何属性中值的任何部分。该var()
函数不能用作属性名称,选择器或除属性值之外的其他任何东西。(这样做通常会产生无效的语法,否则将产生其含义与变量无关的值。)
所以不,您不能在媒体查询中使用它。
这是有道理的。因为您可以将--mobile-breakpoint
例如设置为:root
,即<html>
元素,然后从那里继承其他元素。但是媒体查询不是元素,它也不继承自<html>
,因此它无法工作。
这不是CSS变量要完成的任务。您可以改用CSS预处理器。
以上是 CSS本机变量在媒体查询中不起作用 的全部内容, 来源链接: utcz.com/qa/408608.html