高刷屏暴露传统响应式缺陷，需避免重排重绘、启用硬件加速、保留可访问性缩放、用transform/opacity动画、慎用will-change、以clamp()和aspect-ratio优化断点切换。
高刷屏（如 90Hz、120Hz、144Hz）本身不会改变 HTML/CSS 的渲染逻辑，但会暴露传统响应式实现中被忽略的视觉卡顿和布局抖动问题。关键不是“适配高刷”，而是避免在高帧率下放大已有缺陷——比如重排重绘频繁、动画未启用硬件加速、媒体查询切换时的突变。
viewport 设置要禁用缩放但保留可访问性
高刷设备多为旗舰手机或高端笔记本，用户更可能开启系统级字体缩放或辅助功能。硬写 user-scalable=no 会导致 WCAG 可访问性失败，且在高刷下强制缩放反而引发更严重的渲染撕裂。
- 必须保留
user-scalable=yes，哪怕只允许 0.5–2.0 范围 -
initial-scale=1.0是底线，但不要设maximum-scale=1.0—— 这会让 iOS 在横屏时无法正确重排 viewport - 若需防误触缩放，用 CSS
touch-action: manipulation替代禁用缩放
CSS 动画与 transition 必须用 will-change 或 transform
高刷屏下，left/top 或 width/height 的动画会触发 Layout + Paint，帧率极易跌破 60fps，更别说稳住 120fps。浏览器对 transform 和 opacity 的合成层优化是唯一可靠路径。
- 所有 hover/focus 动画、折叠菜单、卡片悬停，都改用
transform: translateY()或scale()，而非margin-top - 对频繁变化的元素（如滚动视差、实时进度条），提前声明
will-change: transform，但仅限真正需要的元素——滥用会吃显存 - 避免在媒体查询断点内直接改
display: none/block，改用visibility: hidden+transform: scale(0)配合transition
媒体查询断点切换时避免 layout jump
高刷屏让“闪一下”“跳一下”变得极其刺眼。常见于：导航栏从横向变纵向时高度突变、图片容器宽高比重算、字体大小跨断点跳跃。
- 所有断点内的尺寸变更，优先用
clamp()替代阶梯式 media query，例如：font-size: clamp(1rem, 2.5vw, 1.5rem) - 图片/视频容器固定
aspect-ratio（现代浏览器支持），而不是靠 JS 或 padding-bottom hack - 导航菜单收起/展开时，用
max-height+overflow: hidden过渡，比height更稳定；或直接用transform: scaleY()
高刷屏不创造新规则，它只是把旧代码里的 timing bug、layout thrashing 和 paint cost 全部照得一清二楚。最常被忽略的不是“怎么加动画”，而是“哪些地方不该触发重排”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
