如何在媒体查询的宽度值中使用CSS env变量？

代码问题原因 #

• 第一个错误是混淆了env()和自定义属性的用法：env()是专门用于读取浏览器/系统预设的环境变量（比如安全区域边距env(safe-area-inset-top)）的函数，无法读取你在:root里自定义的--width-max变量，自定义属性只能通过var()读取。
• 第二个错误是不符合浏览器的解析规则：就算你把env(--width-max)换成var(--width-max)，原生浏览器目前也不支持在媒体查询的条件表达式中使用自定义属性。媒体查询的匹配发生在页面解析的极早期，此时:root的样式规则还未完成解析，自定义属性的值还未确定，浏览器会直接判定这条媒体查询规则无效。

原生实现方案 #

目前可以用CSS Media Queries Level 5规范提供的@custom-media规则实现类似需求，主流高版本浏览器（Chrome 108+、Firefox 121+、Safari 17+）已经原生支持该特性：

/* 先定义自定义媒体查询规则 */
@custom-media --max-mobile (max-width: 768px);

/* 调用定义好的媒体查询 */
@media screen and (--max-mobile) {
  .foo {
    font-size: 1rem;
  }
}

如果需要在运行时动态调整阈值，可以通过JS动态插入样式规则实现：

const styleEl = document.createElement('style');
document.head.appendChild(styleEl);

function updateMediaThreshold(maxWidth) {
  styleEl.textContent = `
    @custom-media --max-mobile (max-width: ${maxWidth}px);
    @media screen and (--max-mobile) {
      .foo {
        font-size: 1rem;
      }
    }
  `;
}

// 示例：修改阈值为800px
updateMediaThreshold(800);

内容的提问来源于stack exchange，提问作者brewster