使用 css 变量（没有 SASS/LESS）设置媒体查询的最小/最大宽度？答案

【问题标题】：Setting the min/max width of a media query with css variables (without SASS/LESS)?使用 css 变量（没有 SASS/LESS）设置媒体查询的最小/最大宽度？
【发布时间】：2020-07-04 15:54:24
【问题描述】：

我正在为自己开发一个新的入门主题。在其中，我有许多我希望在整个主题中使用的断点。我不想为每个单独的媒体查询管理断点，而是想将 CSS 变量设置为断点像素值并调用媒体查询中的变量。以下是（理想情况下）如何工作的示例

:root {
  --medium: 1024px;
}

p {
  color: black;
}

@media screen and ( min-width: var(--medium) ) {
  p {
    color: red;
  }
}

&lt;p&gt;Text I want to be red in screens larger than 1024px.&lt;/p&gt;

遗憾的是，这种逻辑在常规 CSS/CSS3 中不起作用。有没有人熟悉创建一个点的方法，我可以在不使用预处理器的情况下调整整个主题的媒体查询断点？提前致谢！

【问题讨论】：

您不能在媒体查询中使用 var()。参考：stackoverflow.com/questions/40722882/…

标签： css css-variables

【解决方案1】：

您可以使用matchMedia 完成此操作。

我给出了一个用法示例in this answer。

【讨论】：

【解决方案2】：

正如@rangerz 上面提到的，这目前是不可能的。

我已经开始在所有标有注释的 CSS 文件中添加媒体查询中的实际值：

:root {
    --breakpoint-md-max: 767.98px /*var(--breakpoint-md-max)*/;
    --breakpoint-md-min: 768px /*var(--breakpoint-md-min)*/;
}

@media (min-width: 768px /*var(--breakpoint-md-min)*/ ) {
    #body {
        background: green;
    }
}

如果我需要更改这个“常量”值，这允许我进行全局替换。

另外，有一天，当支持 env() 时，我可以一次性消除这个难看的瑕疵。 :)

【讨论】：

caniuse.com 现在对 env() 有很好的支持，很好奇你是如何使用它们来解决这个问题的？