怎么用CSS变量配合媒体查询实现零JS依赖的响应式布局？-css教程-PHP中文网

CSS变量不能用于@media条件，因规范只接受字面量；正确做法是在媒体查询内重设变量值，注意作用域、单位统一及层叠时机。

怎么用css变量配合媒体查询实现零js依赖的响应式布局？

var() 不能直接放进 @media 条件里，浏览器会静默丢弃整条规则。想靠 CSS 变量做响应式，核心不是“把变量塞进断点”，而是“在断点里重设变量值”。

为什么 `@media (min-width: var(--sm))` 一定失效

CSS 规范禁止变量参与媒体查询计算，它只认字面量，比如 768px 或 1024px。你写的那行代码根本不会被解析，不是值没传过去，是语法不合法、直接跳过。

Chrome、Firefox、Safari 全部一致行为，没有例外
DevTools 的 Styles 面板里也看不到这条规则，不是隐藏了，是压根没加载
别试 calc(var(--sm)) 或 env(--sm)，同样无效

正确做法：在 `@media` 块里修改 `:root` 或局部选择器下的变量

变量得“改给对的人看”。全局响应就改 :root；只影响卡片间距，就只在 .card 里重设。

Expanso yaml-to-json

使用 Expanso Edge 管道将 YAML 输入转换为 JSON 格式。

下载

全局缩放：

@media (min-width: 768px) {
  :root {
    --font-size-base: 1rem;
    --gap: 1.5rem;
  }
}
@media (min-width: 1024px) {
  :root {
    --font-size-base: 1.125rem;
    --gap: 2rem;
  }
}

局部控制（更安全）：

.card {
  --gap: 1rem;
}
@media (max-width: 767px) {
  .card {
    --gap: 0.75rem;
  }
}

这样不会污染其他组件

避免在 :root 里设默认图片 URL：--img-url: "fallback.jpg" 会导致 fallback 图片提前加载；应只在对应断点内声明：@media (min-width: 768px) { :root { --img-url: "large.jpg"; } }

用 `clamp()` 实现流体缩放时的单位陷阱

clamp() 本身不接受变量作参数，但可以靠 calc() 拆解。最容易翻车的是单位混用。

错：font-size: clamp(var(--min), calc(var(--min) + var(--slope) * 1vw), var(--max)); —— 如果 --min 是 1rem，--max 却是 24px，旧版 Safari 会计算失败
对：统一用 rem 或统一用 px，且确保 calc() 里所有项单位兼容，例如 1rem + 2vw 合法，1rem + 2px 在部分环境报错
clamp() 的三个参数必须可比较，不能一个带单位一个不带，也不能混用 em 和 rem 作基准

真正容易被忽略的点：变量重设的**作用域链**和**层叠时机**。你在 @media 里改了 :root 的 --gap，但某个子组件用了 inherit 或 unset，它可能根本收不到新值；或者你忘了清除旧的 inline style，它会强制覆盖 CSS 变量。这些都不是语法错误，而是运行时表现偏差，调试起来比 JS bug 还难定位。