响应式设计中JavaScript可通过resize事件、matchMedia和orientationchange事件感知屏幕变化，需节流resize以防性能问题，优先使用window.innerWidth等视口尺寸而非screen.width。
响应式设计不只靠 CSS 媒体查询，JavaScript 也能实时感知屏幕变化，做更灵活的交互控制。关键在于监听视口尺寸变动，并在合适时机执行逻辑。
用 resize 事件监听窗口大小变化
最直接的方式是监听 window 的 resize 事件：
- 每次浏览器窗口被拖拽、缩放或设备旋转时都会触发
- 注意：该事件高频触发，建议加节流（throttle），避免性能问题
- 示例代码：
console.log('视口宽：', window.innerWidth);
if (window.innerWidth }, 150));
用 matchMedia 精准匹配媒体查询条件
比 resize 更高效、语义更清晰，适合响应式行为切换：
- 类似 CSS 媒体查询语法，例如
matchMedia('(max-width: 767px)') - 返回
MediaQueryList对象，可监听change事件，只在断点跨越时触发 - 支持主动查询当前是否匹配：
mql.matches - 示例：
mql.addEventListener('change', e => {
if (e.matches) { console.log('进入移动端视口'); }
else { console.log('回到桌面端'); }
});
监听设备方向变化（针对移动端）
当用户旋转手机时，除了宽度变化，还可监听 orientationchange 事件：
立即学习“Java免费学习笔记（深入）”；
- 兼容性较好，但注意 iOS Safari 中该事件可能不总触发，推荐优先用
resize或matchMedia配合(orientation: landscape) - 获取当前方向可用：
window.orientation（已废弃，不推荐）或screen.orientation.type
注意视口（viewport）与窗口尺寸的区别
响应式 JS 逻辑中常用的是 window.innerWidth 和 window.innerHeight，它们反映的是 CSS 像素下的视口尺寸；而 screen.width 是设备物理分辨率（不随缩放变化）。做布局判断时，99% 场景应使用前者。
基本上就这些。核心是：简单适配用 matchMedia，需要精确尺寸或动态计算用节流后的 resize，方向敏感场景再叠加 orientation 判断。不复杂但容易忽略节流和断点一致性。
