如何使用CSS自定义属性实现动态响应式布局？-css教程-PHP中文网

css自定义属性（--var）适合动态响应式布局的特定场景：高度联动、视口比例依赖、需dom数据参与的调整；它解决css无法感知dom状态的问题，非@media平替，核心价值在灵活性而非性能。

如何使用css自定义属性实现动态响应式布局？

直接用 CSS 自定义属性（--var）做动态响应式布局，本质是把「媒体查询能干的事」换成 JS 驱动的运行时计算——但别盲目上，它只在特定场景真正省事，比如高度联动、视口比例依赖、或需要 DOM 数据参与的布局调整。

什么时候该用 `--var` 替代 `@media`

自定义属性不是媒体查询的平替，它解决的是「CSS 无法感知 DOM 状态或计算结果」的问题：

需要根据元素实际尺寸（如 offsetHeight）动态设高度/间距，而不仅仅是屏幕宽度
多个层级间需共享同一计算值（比如 .layer1 高度影响 .layer2 的 margin-top）
用户交互触发布局变化（如折叠面板后重新分配剩余空间），且变化逻辑复杂到媒体查询写不出来
你已经在用 JS 监听 resize，顺手把计算结果塞进 :root 或容器上比反复操作 style 更轻量

`updateHeights` 这类函数怎么写才不卡顿

关键不是「算得对」，而是「别在每次 resize 里重排重绘」：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

用 requestAnimationFrame 节流，避免连续触发导致 layout thrashing
只读取必要尺寸：优先用 getBoundingClientRect()，而非 offsetHeight（后者强制同步布局）
批量设置：把多个 --var 合并在一次 element.style.setProperty() 调用里，而不是分开设

示例节选：

function updateHeights() {
  const rect = container.getBoundingClientRect();
  document.documentElement.style.setProperty('--layer1-height', `${rect.height * 0.6}px`);
  document.documentElement.style.setProperty('--layer2-height', `${rect.height * 0.3}px`);
}

自定义属性 + `calc()` 组合的典型陷阱

很多人以为写了 height: calc(100vh - var(--header-height)) 就万事大吉，实际掉坑里了：

var(--x) 必须有 fallback 值，否则整个 calc() 失效：写成 calc(100vh - var(--header-height, 60px))
单位必须一致：不能 var(--gap, 1rem) 和 20px 混加，calc(20px + var(--gap, 1rem)) 会报错
不能在伪元素或 @keyframes 里动态读取 JS 设置的 --var（它们不重绘），得靠 class 切换或内联 style
Firefox 对嵌套 calc(var(--a) + var(--b)) 支持不稳定，建议扁平化为单层 calc()