我试图在媒体查询中使用CSS变量,但它不起作用.
:root {
--mobile-breakpoint: 642px;
}
@media (max-width: var(--mobile-breakpoint)) {
}
解决方法
从
spec,
The
var()function can be used in place of any part of a value in
any property on an element. Thevar()function can not be used as
property names,selectors,or anything else besides property values.
(Doing so usually produces invalid Syntax,or else a value whose
meaning has no connection to the variable.)
所以不,你不能在媒体查询中使用它.
这是有道理的.因为你可以设置–mobile-breakpoint,例如to：root,即< html>元素,并从那里继承到其他元素.但是媒体查询不是一个元素,它不会从< html>继承,所以它无法工作.
这不是CSS变量试图完成的.您可以使用CSS预处理器.
