监听窗口大小变化首选 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 的支持程度差异很大，上线前务必真机测试。
