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

Posted 2023-03-06

【中文标题】使用 css 变量（没有 SASS/LESS）设置媒体查询的最小/最大宽度？

【英文标题】：Setting the min/max width of a media query with css variables (without 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;
  

<p>Text I want to be red in screens larger than 1024px.</p>

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

【问题讨论】：

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

【参考方案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() 有很好的支持，很好奇你是如何使用它们来解决这个问题的？