我试图在媒体查询中使用CSS变量，但它不起作用。
:root {
--mobile-breakpoint: 642px;
}
@media (max-width: var(--mobile-breakpoint)) {
}
当前回答
正如你可以阅读其他答案，仍然不可能这样做。
有人提到了自定义环境变量(类似于自定义css变量env()而不是var())，原理是合理的，尽管仍然有2个主要问题:
浏览器支持弱 到目前为止，还没有办法定义它们(但可能在未来会，因为到目前为止这只是一个非官方的草案)
其他回答
显然，像这样使用原生CSS变量是不可能的。这是局限性之一。
使用它的一个聪明的方法是改变media-query中的变量，以影响你的所有风格。我推荐这篇文章。
:root {
--gutter: 4px;
}
section {
margin: var(--gutter);
}
@media (min-width: 600px) {
:root {
--gutter: 16px;
}
}
你可以做的是@media查询你的:根语句!
:root {
/* desktop vars */
}
@media screen and (max-width: 479px) {
:root {
/* mobile vars */
}
}
完全适用于Chrome, Firefox和Edge，至少是最新的生产版本。
一个限制:如果您需要将值作为变量访问—例如在其他地方的计算中使用—您将需要有一个变量，并且需要在两个地方定义变量:媒体查询和变量声明。
媒体查询的第5级规范定义了自定义媒体查询，它几乎可以满足您的需求。它允许您像定义CSS变量一样定义断点，然后在不同的地方使用它们。
示例来自规范:
@custom-media --narrow-window (max-width: 30em);
@media (--narrow-window) {
/* narrow window styles */
}
@media (--narrow-window) and (script) {
/* special styles for when script is allowed */
}
目前还没有对这个功能的支持，所以在使用这个功能之前，我们必须等待。
正如你可以阅读其他答案，仍然不可能这样做。
有人提到了自定义环境变量(类似于自定义css变量env()而不是var())，原理是合理的，尽管仍然有2个主要问题:
浏览器支持弱 到目前为止，还没有办法定义它们(但可能在未来会，因为到目前为止这只是一个非官方的草案)
从说明书来看，
中的var()函数可用于替换值的任何部分 元素上的任何属性。var()函数不能作为 属性名、选择器或除属性值之外的任何东西。 (这样做通常会产生无效的语法，或者值为 含义与变量无关。)
你不能在媒体查询中使用它。
这是有道理的。因为你可以将——mobile-breakpoint设置为:root，即<html>元素，并从那里继承到其他元素。但是媒体查询不是一个元素，它不继承<html>，所以它不能工作。
这不是CSS变量想要实现的。你可以使用CSS预处理器。
