正如Oriol所回答的，CSS变量级别1的var()目前不能在媒体查询中使用。然而，最近的事态发展将解决这一问题。一旦CSS环境变量模块第1级标准化并实现，我们将能够在所有现代浏览器的媒体查询中使用env()变量。

CSS工作组(CSSWG)在一个新标准中编纂了env()(目前处于草案阶段):CSS环境变量模块第1级(参见这条GitHub评论和这条评论了解更多信息)。草案将媒体查询中的变量作为一个显式用例:

因为环境变量不依赖于从特定元素中抽取的任何值，所以它们可以用于没有明显元素可抽取的地方，例如在@media规则中，其中var()函数是无效的。

如果你阅读了规范并有一个问题，或者如果你想表达你对媒体查询用例的支持，你可以在第2627期，第3578期，或任何标记为“CSS -env-1”的CSS GitHub问题中这样做。

GitHub issue #2627和GitHub issue #3578致力于媒体查询中的自定义环境变量。

Original answer from 2017-11-09: Recently, the CSS Working Group decided that CSS Variables Level 2 will support user-defined environment variables using env(), and they will try to make them be valid in media queries. The Group resolved this after Apple first proposed standard user-agent properties, shortly before the official announcement of iPhone X in September 2017 (see also WebKit: “Designing Websites for iPhone X” by Timothy Horton). Other browser representatives then agreed they would be generally useful across many devices, such as television displays and ink printing with bleed edges. (env() used to be called constant(), but that has now been deprecated. You might still see articles that refer to the old name, such as this article by Peter-Paul Koch.) After some weeks passed, Cameron McCormack of Mozilla realized that these environment variables would be usable in media queries, and Tab Atkins, Jr. of Google then realized that user-defined environment variables would be especially useful as global, non-overridable root variables usable in media queries. Now, Dean “Dino” Jackson of Apple will join Atkins in editing Level 2.

您可以在w3c/ CSSWG -drafts GitHub issue #1693中订阅有关此问题的更新(特别是相关的历史细节，扩展嵌入CSSWG会议机器人决议中的会议日志，并搜索“MQ”，即“媒体查询”)。

显然，像这样使用原生CSS变量是不可能的。这是局限性之一。

使用它的一个聪明的方法是改变media-query中的变量，以影响你的所有风格。我推荐这篇文章。

:root {
  --gutter: 4px;
}

section {
  margin: var(--gutter);
}

@media (min-width: 600px) {
  :root {
    --gutter: 16px;
  }
}

实现你想要的一个方法是使用npm包postcss-media-variables。

如果你可以使用npm包，那么你可以在这里查看相同的文档:

postcss-media-variables

例子

/* input */
:root {
  --min-width: 1000px;
  --smallscreen: 480px;
}
@media (min-width: var(--min-width)) {}
@media (max-width: calc(var(--min-width) - 1px)) {}

@custom-media --small-device (max-width: var(--smallscreen));
@media (--small-device) {}

你可以做的是@media查询你的:根语句!

:root {
     /* desktop vars */
}
@media screen and (max-width: 479px) {
    :root {
        /* mobile vars */
    }
}

完全适用于Chrome, Firefox和Edge，至少是最新的生产版本。

一个限制:如果您需要将值作为变量访问—例如在其他地方的计算中使用—您将需要有一个变量，并且需要在两个地方定义变量:媒体查询和变量声明。

正如Oriol所回答的，CSS变量级别1的var()目前不能在媒体查询中使用。然而，最近的事态发展将解决这一问题。一旦CSS环境变量模块第1级标准化并实现，我们将能够在所有现代浏览器的媒体查询中使用env()变量。

CSS工作组(CSSWG)在一个新标准中编纂了env()(目前处于草案阶段):CSS环境变量模块第1级(参见这条GitHub评论和这条评论了解更多信息)。草案将媒体查询中的变量作为一个显式用例:

因为环境变量不依赖于从特定元素中抽取的任何值，所以它们可以用于没有明显元素可抽取的地方，例如在@media规则中，其中var()函数是无效的。

如果你阅读了规范并有一个问题，或者如果你想表达你对媒体查询用例的支持，你可以在第2627期，第3578期，或任何标记为“CSS -env-1”的CSS GitHub问题中这样做。

GitHub issue #2627和GitHub issue #3578致力于媒体查询中的自定义环境变量。

Original answer from 2017-11-09: Recently, the CSS Working Group decided that CSS Variables Level 2 will support user-defined environment variables using env(), and they will try to make them be valid in media queries. The Group resolved this after Apple first proposed standard user-agent properties, shortly before the official announcement of iPhone X in September 2017 (see also WebKit: “Designing Websites for iPhone X” by Timothy Horton). Other browser representatives then agreed they would be generally useful across many devices, such as television displays and ink printing with bleed edges. (env() used to be called constant(), but that has now been deprecated. You might still see articles that refer to the old name, such as this article by Peter-Paul Koch.) After some weeks passed, Cameron McCormack of Mozilla realized that these environment variables would be usable in media queries, and Tab Atkins, Jr. of Google then realized that user-defined environment variables would be especially useful as global, non-overridable root variables usable in media queries. Now, Dean “Dino” Jackson of Apple will join Atkins in editing Level 2.

您可以在w3c/ CSSWG -drafts GitHub issue #1693中订阅有关此问题的更新(特别是相关的历史细节，扩展嵌入CSSWG会议机器人决议中的会议日志，并搜索“MQ”，即“媒体查询”)。

从说明书来看，

中的var()函数可用于替换值的任何部分 元素上的任何属性。var()函数不能作为 属性名、选择器或除属性值之外的任何东西。 (这样做通常会产生无效的语法，或者值为 含义与变量无关。)

你不能在媒体查询中使用它。

这是有道理的。因为你可以将——mobile-breakpoint设置为:root，即<html>元素，并从那里继承到其他元素。但是媒体查询不是一个元素，它不继承<html>，所以它不能工作。

这不是CSS变量想要实现的。你可以使用CSS预处理器。