CSS 可通过 clamp()、vw/vh 单位和 transition 实现无 JS 的窗口响应式布局，避免 layout thrashing；ResizeObserver 适用于元素尺寸监听而非 viewport；max-width + overflow 比 width 更稳定实现动画。
窗口大小改变时，CSS 本身无法“监听” resize，但能通过声明式方式响应变化——关键不是写 JS 监听，而是用对的 CSS 单位和函数让浏览器自动、平滑地重排。
用 clamp() 替代媒体查询做连续外边距过渡
硬切断点（@media）会让 margin 在 768px 处突变。用 clamp() 可实现从 5% 到 15% 的线性缩放：
- 锚点选 400px 和 800px：对应 margin 值为
20px和120px - 推导出表达式：
clamp(5%, 25vw - 80px, 15%) - 单位混用合法：
%和vw/px在clamp()内可共存，浏览器自动归一化 - 极小屏下不会负值——
clamp()的 min 参数兜底
用 vw/vh + transition 控制定位元素缩放
固定定位按钮贴右下角时，别写死 right: 20px，改用视口单位：
-
right: clamp(1rem, 5vw, 2rem)—— 小屏用 rem，中屏随宽度伸缩，大屏锁死 - 搭配
transition: right 0.2s ease，resize 时自动插值，无 JS 干预 - 避免同时用
right和transform：后者优先级高，会覆盖前者，动画断裂 - 移动端 Safari 对
vw在 resize 瞬间有微小延迟，加will-change: right提前提示（仅限高频变动元素）
避免在 resize 回调里读写 layout 属性
很多人写 JS 监听 window.resize 来重设样式，结果卡顿——根本原因是触发 layout thrashing：
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
targetEl.style.left = targetEl.getBoundingClientRect().left + 'px'→ 每次都强制回流 - 正确思路：定位逻辑能用 CSS 解决的，就别进 JS；必须 JS 补充时，只读一次
getBoundingClientRect()，再批量写transform - 如果依赖另一个元素高度（比如避开 banner），用
ResizeObserver监听那个元素，而不是监听 window -
ResizeObserver不响应窗口缩放，这点常被误用——它只管元素盒模型，不管 viewport
用 max-width + overflow 实现响应式容器伸缩动画
侧边栏收起/展开时，width 动画易卡顿且受父容器影响；max-width 更稳：
- 初始：
max-width: 0; overflow: hidden; opacity: 0; - 展开态：
max-width: 240px; opacity: 1;，配transition: max-width 0.3s ease, opacity 0.3s ease - 别用
display: none切换——它跳过渲染，transition完全失效 - 移动端需补
transform: scaleX(0)防止字体微占空间，尤其在 WebKit 内核下
真正平滑的流式过渡，本质是把“变化”交给浏览器原生计算，而不是靠 JS 打补丁。复杂定位逻辑才需要 JS，但读写必须分离、避免回流，否则再好的 transition 也救不回掉帧。
