时间戳

首页 > 解决方案 > 如何在媒体查询宽度值中使用 CSS 环境变量？

css - 如何在媒体查询宽度值中使用 CSS 环境变量？

问题描述

@media screen and (max-width: env(--width-max)) {
  .foo {
    font-size: var(--fonts-size);
  }
}

:root {
  --width-max: 0;
  --fonts-size: 1rem;
}

据我了解，上面的代码应该在.foo元素上设置一个媒体查询，但是浏览器没有接收到它。我看到了 postcss-media-variables 库，但更喜欢使用env，但无法弄清楚我做错了什么。如何在媒体查询中访问 CSS 环境变量？

标签： cssenvironment-variablesmedia-queriescss-variables

解决方案

推荐阅读