问题：CSS 变量在媒体查询中不起作用
尝试将 CSS 变量合并到媒体查询中时，它们仍然无效。以下代码为例：
:root {
--mobile-breakpoint: 642px;
}
@media (max-width: var(--mobile-breakpoint)) {
}说明：
根据 CSS 规范：
"var() 函数可以用于代替元素上任何属性中值的任何部分 var() 函数不能用作属性名称、选择器或元素。除了属性值之外的任何其他内容。”
换句话说，虽然变量可以合并到属性值中，但它们仍然与媒体查询不兼容。这是因为媒体查询不是 HTML 元素，因此无法从通常定义变量的根元素继承。
替代方案：
实现类似的效果功能，开发人员可以考虑使用 CSS 预处理器。预处理器通过允许编写自定义代码来扩展 CSS，这些代码可用于基于变量值创建动态媒体查询。
以上是为什么我的 CSS 变量在媒体查询中不起作用？的详细内容。更多信息请关注PHP中文网其他相关文章！
