纯 CSS 变量无法自动读取容器宽度，必须用 JavaScript（如 ResizeObserver）动态设置变量值才能实现 padding 随容器宽变化；多数场景应优先使用 clamp() 或媒体查询等纯 CSS 方案。
纯 CSS 变量（--my-var）本身无法读取容器实际宽度，必须配合 JavaScript 才能实现真正的“根据容器宽度动态调整 padding”。
为什么 calc(var(--w) * 0.1) 单独用不了
CSS 变量只是占位符，它不自动更新——你得自己给 --w 赋值。浏览器不会主动把某个容器的 offsetWidth 或 getBoundingClientRect().width 写进 --w；这个动作必须由 JS 触发。
-
--w: 100%这类写法无效：百分比在变量里仍是静态字符串，calc()解析时拿不到运行时尺寸 - 即使你用 JS 设置了
el.style.setProperty('--w', '420px')，后续容器尺寸变了也不会自动重设 -
padding-top: calc(var(--w) * 0.05)是合法的，但前提是--w真是像素值（如'420px'），且单位匹配
JS + CSS 变量联动的关键步骤
要让 padding 随容器宽度变化，必须手动监听并更新变量：
- 选中目标容器：
const container = document.querySelector('#sidebar') - 读宽并设变量：
container.parentElement.style.setProperty('--container-w', `${container.offsetWidth}px`)（注意：变量通常设在父级或:root，便于子元素继承） - 监听 resize：
window.addEventListener('resize', updateWidth, { passive: true })，但更推荐用ResizeObserver监听具体容器 - CSS 中使用：
padding-left: calc(var(--container-w) * 0.08);（乘数需为无单位数字）
别漏掉：如果容器宽度可能频繁变化（比如折叠菜单），记得在交互后手动调用一次 updateWidth()，否则变量滞后。
立即学习“前端免费学习笔记（深入）”；
更轻量、更常用的替代方案
90% 的“随容器宽调整 padding”需求，其实真正想响应的是视口宽度或断点，不是某个 DOM 元素的实时像素值。这时完全不用 JS：
- 用
clamp(0.75rem, 5vw, 2rem)：平滑过渡，兼容性好（Chrome 88+，Firefox 79+） - 用媒体查询 + CSS 变量：
@media (min-width: 768px) { :root { --pad: 1.5rem; } }，再统一写padding: var(--pad) - Bootstrap 用户直接用
px-2 px-md-4 px-xl-5，背后就是带断点的静态 padding 声明，稳定且可预测
真正需要 JS 动态读取容器宽度的场景极少——比如拖拽调整侧边栏后，主内容区 padding 必须精确按比例缩放。这种复杂度下，别省略 ResizeObserver 的节流和 requestAnimationFrame 的防抖。
