正确做法是用 getComputedStyle(element) 获取真实渲染值，它返回当前生效的全部计算后样式，需 parseFloat 提取数值；监听容器尺寸用 ResizeObserver；布局计算需遵循读-算-写-等帧节奏。
用 getComputedStyle 读取真实 CSS 值再参与布局计算
纯 CSS 的 calc() 或 clamp() 无法响应运行时 DOM 变化（比如容器尺寸、字体加载完成、用户缩放），必须靠 JS 获取真实渲染值。常见错误是直接读 element.style.width，它只返回内联样式，而忽略 class 或媒体查询生效的值。
正确做法是用 getComputedStyle(element)，它返回当前生效的全部计算后样式：
const el = document.querySelector('.card');
const style = getComputedStyle(el);
const width = parseFloat(style.width); // 单位已转为 px
const fontSize = parseFloat(style.fontSize);注意：getComputedStyle 返回的是字符串（如 "400px"），需用 parseFloat 提取数值；若依赖相对单位（em, rem），要确保父级或根字体大小已稳定，否则可能拿到旧值。
监听容器尺寸变化用 ResizeObserver，别用 window.resize
window.addEventListener('resize') 只能捕获视口变化，对内部容器（比如侧边栏折叠、卡片网格重排）完全无感。真正动态布局的关键是监听具体元素尺寸变动。
立即学习“前端免费学习笔记（深入）”；
ResizeObserver 是现代标准方案，支持观测内容框（content-box）或边框框（border-box）变化：
const ro = new ResizeObserver(entries => {
for (const entry of entries) {
const { inlineSize, blockSize } = entry.contentBoxSize[0] || entry.contentRect;
// inlineSize ≈ width, blockSize ≈ height（含 padding）
if (inlineSize < 600) {
element.classList.add('compact');
} else {
element.classList.remove('compact');
}
}
});
ro.observe(document.querySelector('.layout-container'));兼容性提示：IE 完全不支持，如需兼容可降级为 scroll + offsetWidth 轮询（仅限低频场景）；Safari 15.4+ 才支持 contentBoxSize 新 API，旧版用 contentRect 更稳妥。
用 CSS Custom Properties 暴露 JS 控制点，避免硬编码样式
直接在 JS 里写 el.style.marginLeft = '24px' 会覆盖原有样式且难以维护。更合理的方式是定义 CSS 变量，在 JS 中修改变量值，让 CSS 自动响应：
:root {
--sidebar-width: 260px;
--gap: 16px;
}
<p>.layout {
margin-left: calc(var(--sidebar-width) + var(--gap));
}JS 修改只需：
document.documentElement.style.setProperty('--sidebar-width', '200px');
// 或针对局部元素
element.style.setProperty('--gap', '8px');这样做的好处：动画可交由 CSS 过渡（transition: --gap 0.3s），逻辑与表现分离，也方便主题切换或用户偏好适配（比如暗色模式下调整间距）。
避免强制同步布局（Forced Synchronous Layout）
当 JS 频繁读写样式（如循环中先 getComputedStyle 再 el.style.left = ...），浏览器被迫立即计算布局，造成卡顿。这是动态布局中最隐蔽的性能陷阱。
解决思路分三步：
- 批量读取：把所有需要的尺寸/样式一次读完，缓存结果
- 批量写入：所有样式变更集中到一次 DOM 更新（如用
classList或style.cssText） - 用
requestAnimationFrame对齐渲染帧，避开 layout thrashing
示例反模式（卡顿）：
for (let i = 0; i < items.length; i++) {
const w = items[i].offsetWidth; // 强制重排
items[i].style.left = w * i + 'px'; // 再次触发重排
}优化后：
const widths = Array.from(items, el => el.offsetWidth); // 一次性读
requestAnimationFrame(() => {
items.forEach((el, i) => {
el.style.left = widths[i] * i + 'px';
});
});复杂布局（如虚拟滚动、瀑布流）务必用这个节奏——读、算、写、等帧，否则滑动会明显掉帧。
动态布局的核心不是“让 JS 控制更多”，而是“让 JS 和 CSS 各司其职”：CSS 管规则和过渡，JS 管触发条件和数据源。变量、观察者、帧调度这三样，漏掉任何一环都容易在真实交互中露出马脚。
