JavaScript不直接实现响应式，核心是CSS媒体查询和流式布局；JS仅补位处理CSS无法完成的动态行为，如资源加载、窗口监听、点击延迟修复等，应优先用matchMedia而非resize事件，避免硬编码断点像素值。
JavaScript 本身不直接实现响应式设计，响应式的核心是 CSS 媒体查询（@media）和 HTML 流式布局；JS 的作用是补位——处理那些 CSS 做不了或不方便做的动态行为，比如根据屏幕尺寸加载不同资源、监听窗口变化、修复移动端点击延迟、或在特定断点触发交互逻辑。
什么时候该用 JS 做响应式判断？
纯 CSS 能搞定的（如元素显隐、字体缩放、栅格切换），坚决不用 JS。JS 只介入以下真实场景：
- 需要读取
window.innerWidth或matchMedia结果做条件分支（例如：小屏下初始化轮播图，大屏下禁用） - 动态加载设备适配的图片（
srcset不够用时，比如要结合用户网络类型） - 监听
resize事件调整 Canvas 尺寸、重绘 SVG、或更新虚拟滚动区域 - 检测是否为触摸设备（
'ontouchstart' in window），从而切换 hover / click 行为
matchMedia 比 resize 更可靠
用 window.addEventListener('resize', ...) 容易高频触发、卡顿，且无法感知 CSS 断点实际生效状态。推荐用 matchMedia 监听媒体查询匹配变化：
const mql = window.matchMedia('(max-width: 768px)');
function handleMobileChange(e) {
if (e.matches) {
console.log('进入移动端视口');
initTouchNav();
} else {
console.log('退出移动端视口');
destroyTouchNav();
}
}
mql.addListener(handleMobileChange); // 注意：旧版用 addListener，新版用 add()
handleMobileChange(mql); // 立即执行一次，避免首次不触发
注意：matchMedia 返回的 MediaQueryList 对象有 matches 属性，它反映的是当前 CSS 媒体查询是否匹配，而非单纯窗口宽度——这意味着它和你的 CSS 断点完全同步，不会出现 JS 判断为 PC、但 CSS 已经切到 mobile 样式的情况。
立即学习“Java免费学习笔记（深入）”；
别在 JS 里硬编码像素值做断点判断
常见错误：写 if (window.innerWidth 。这会和 CSS 中的 @media (max-width: 768px) 脱节——CSS 使用的是 viewport width（含滚动条），而 window.innerWidth 是浏览器窗口内部宽度（不含滚动条），两者在有垂直滚动条时可能差 12–17px，导致 JS 和 CSS 行为不一致。
- 始终让 JS 和 CSS 共用同一套断点定义：把断点写进 CSS 自定义属性，再用 JS 读取
- 或者统一用
matchMedia，它和 CSS 解析器使用同一套逻辑 - 避免在 JS 中重复维护
768、1024这类 magic number
真正难的不是写几行 matchMedia，而是想清楚哪些交互必须由 JS 驱动、哪些其实该交给 CSS :target / :hover / @container / resize-observer。多数“JS 响应式”需求，本质是没吃透 CSS 新特性就急着上手操作 DOM。
