为什么我不能在媒体查询中使用 CSS 变量？

原生 CSS 变量在媒体查询中不可用

CSS 变量的早期用户在尝试将其合并到媒体查询中时可能会遇到问题。常见的方法如：

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

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

}

将无法按预期运行。

幕后：CSS 规范限制

根据 CSS 规范，var() 函数仅适用于属性值。它在其他上下文中是被禁止的，例如属性名称、选择器或媒体查询。这就解释了为什么在媒体查询中使用它是无效的。

操作注意事项

这个限制是合乎逻辑的。虽然 CSS 变量可以分配给根元素（例如 ）并由后代继承，但媒体查询本身不是元素，因此缺乏继承功能。

替代解决方案

CSS 变量并非旨在解决此特定用例。作为一种解决方法，可以使用 CSS 预处理器，它提供附加功能并允许在媒体查询中使用变量。

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