为什么我的 CSS 变量在媒体查询中不起作用？

问题：CSS 变量在媒体查询中不起作用

尝试将 CSS 变量合并到媒体查询中时，它们仍然无效。以下代码为例：

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

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

}

说明：

根据 CSS 规范：

"var() 函数可以用于代替元素上任何属性中值的任何部分 var() 函数不能用作属性名称、选择器或元素。除了属性值之外的任何其他内容。”

换句话说，虽然变量可以合并到属性值中，但它们仍然与媒体查询不兼容。这是因为媒体查询不是 HTML 元素，因此无法从通常定义变量的根元素继承。

替代方案：

实现类似的效果功能，开发人员可以考虑使用 CSS 预处理器。预处理器通过允许编写自定义代码来扩展 CSS，这些代码可用于基于变量值创建动态媒体查询。

以上是为什么我的 CSS 变量在媒体查询中不起作用？的详细内容。更多信息请关注PHP中文网其他相关文章！