CSS @media与JS监听resize事件适配方案的区别及选型建议

两者从运行底层到适用场景根本不是一回事，不存在谁平替谁的说法，核心区别有这几个：

• 运行机制完全不同：@media 是浏览器渲染引擎原生实现的响应式规则，在页面布局、绘制阶段就会自动匹配视口尺寸应用对应样式，全程不占用JS主线程，浏览器本身会做渲染层的优化，不会产生额外的性能开销。
• JS的resize事件监听是运行在JS主线程上的，用户拖拽调整窗口尺寸时这个事件会以极高的频率触发，如果回调里直接操作DOM、跑复杂计算，很容易占满主线程导致页面掉帧、卡顿。而且回调执行时机在浏览器抛出resize事件之后，手动修改样式很容易触发额外的重排重绘，极端情况会出现页面闪烁。

所有纯样式调整的响应式需求，无条件优先用@media实现。
比如不同宽度下的布局切换、字体大小调整、元素显隐、边距适配这类纯视觉需求，用CSS写是最优解：不需要自己写防抖逻辑、不需要兼容各种边界情况、哪怕页面JS加载失败或者报错，响应式样式依然能正常生效，稳定性和性能都比JS方案高好几个量级。

只有当CSS实现不了的时候，才需要用JS监听尺寸变化，常见场景包括：

• 尺寸变化后需要执行业务逻辑，而非单纯改样式：比如canvas画布重绘、ECharts等第三方可视化实例调用resize方法、根据容器宽度动态调整分页条数、修改懒加载触发阈值等
• 需要获取DOM元素的精确尺寸做复杂计算，CSS的calc/clamp/grid等原生能力无法覆盖的场景
• 监听非视口的特定DOM元素尺寸变化（这种场景更推荐用ResizeObserver，比监听window.resize精准得多）

完全不能，不存在替代关系：

不要尝试用JS监听resize全量替代@media，你写的防抖逻辑再完善，也比不过浏览器原生渲染层的优化优先级，而且一旦JS运行出错，整个响应式逻辑直接崩溃，可用性远不如纯CSS方案。
反过来@media也不可能替代JS的尺寸监听：CSS只能控制样式，没法触发业务逻辑执行，总不能靠CSS规则去调用canvas重绘方法、去通知第三方组件更新尺寸吧？

最后补个实际开发的小提醒：真要用JS监听resize的话，记得给回调加防抖，比如用window.addEventListener('resize', debounce(handleResize, 100))，把高频触发的回调合并成100ms左右执行一次，能避免很多不必要的性能损耗。

内容的提问来源于stack exchange，提问作者rewfsdv