javascript如何实现响应式设计_它怎样监听窗口变化？

监听窗口大小变化首选 matchMedia()，它精准轻量、按媒体查询条件触发；resize 事件需节流防卡顿；横竖屏判断应结合 screen.orientation，避免仅依赖 resize。

用 window.addEventListener('resize') 监听窗口大小变化

最直接的方式是监听 resize 事件，但要注意它触发频繁，不加节流容易卡顿。浏览器在拖拽窗口、缩放页面、横竖屏切换时都会触发该事件。

• 只监听一次？用 addEventListener，别用已废弃的 window.onresize
• 移动端横竖屏切换也会触发，但部分 ios safari 在旋转动画过程中可能延迟触发
• 不要在回调里直接操作 dom 样式，优先用 css 媒体查询；js 仅用于补位逻辑（比如 canvas 重绘、第三方库尺寸同步）
• 简单节流可这样写：

  let resizeTimer; window.addEventListener('resize', () => {   clearTimeout(resizeTimer);   resizeTimer = setTimeout(() => {     handleResize();   }, 16); // 约 60fps });

matchMedia() 比 resize 更精准、更轻量

当你的逻辑只依赖特定断点（如 min-width: 768px），matchMedia() 是更好的选择。它不依赖像素数值，而是监听媒体查询条件是否匹配，且支持主动查询和事件监听。

• 初始化即知状态：const mql = window.matchMedia('(min-width: 768px)');，mql.matches 立刻返回布尔值
• 监听变化用 mql.addEventListener('change', handler)（注意：旧版用 addListener，已弃用）
• 多个断点建议分别创建 matchMedia 实例，不要拼长条件——例如 (min-width: 768px) and (max-width: 1023px) 可读性差，也难维护
• 它不会在每次像素微调时触发，只在媒体查询真值切换时响应，性能友好

CSS 优先，JS 只做“不可替代”的响应逻辑

响应式设计的主干必须由 CSS 媒体查询承担。JS 的角色是辅助：比如 canvas 需要根据视口重设 width/height 属性，或第三方图表库（如 Chart.js）需要手动调用 .resize() 方法。

• 错误做法：用 JS 动态加 class 控制显示/隐藏——应该用 @media + display: none
• 正确做法示例（Canvas 自适应）：

  function resizeCanvas() {   const canvas = document.getElementById('myCanvas');   const dpr = window.devicePixelRatio || 1;   canvas.width = canvas.clientWidth * dpr;   canvas.height = canvas.clientHeight * dpr;   const ctx = canvas.getContext('2d');   ctx.scale(dpr, dpr); } const mql = window.matchMedia('(min-width: 768px)'); mql.addEventListener('change', resizeCanvas); resizeCanvas(); // 初始化

• 注意：clientWidth 和 offsetWidth 含义不同，响应式中优先用 clientWidth（不含边框、滚动条）

移动端横竖屏判断不能只靠 resize

单纯监听 resize 无法区分横竖屏，因为某些设备（尤其是 ipad）在旋转时视口宽高比变化不明显，或触发时机异常。应结合 screen.orientation 或 orientationchange 事件（iOS Safari 已废弃，但仍有兼容价值）。

立即学习“Java免费学习笔记（深入）”；

• 现代推荐方式：screen.orientation.addEventListener('change', ...)，检查 screen.orientation.type（值为 portrait-primary、landscape-secondary 等）
• 降级方案：监听 resize + 判断 window.innerWidth > window.innerHeight，但需加防抖，避免误判
• iOS Safari 中，orientationchange 事件在 Safari 15.4+ 已被移除，不要依赖
• 注意：screen.orientation 在非安全上下文（http）中可能不可用，需确保站点使用 https

实际项目里，matchMedia 覆盖 80% 的断点响应需求，resize 节流后处理像素级适配，而横竖屏逻辑要单独验证设备行为——不同 iOS 版本对 screen.orientation 的支持程度差异很大，上线前务必真机测试。