JavaScript 不直接实现响应式设计，而是补充 CSS 媒体查询，通过监听 resize 或 matchMedia 处理动态适配，如重绘图表、懒加载图片、切换组件形态，并协同 CSS 的 @media、rem、clamp 等技术实现真正响应式。
JavaScript 本身不直接实现响应式设计，但可以增强和补充 CSS 媒体查询的能力，处理那些纯 CSS 难以完成的动态适配逻辑，比如根据视口变化重绘图表、懒加载不同尺寸图片、动态调整组件行为等。
用 JavaScript 监听视口变化
响应式的核心触发点是屏幕尺寸变化。可通过 window.addEventListener('resize', handler) 实时响应，但要注意防抖，避免频繁触发：
- 使用
setTimeout或requestAnimationFrame做简单防抖 - 优先用
matchMedia()监听特定断点（更精准、性能更好）
示例：
const mediaQuery = window.matchMedia('(max-width: 768px)');
function handleBreakpoint(e) {
if (e.matches) {
console.log('进入移动端布局');
document.body.classList.add('mobile');
} else {
console.log('回到桌面布局');
document.body.classList.remove('mobile');
}
}
mediaQuery.addEventListener('change', handleBreakpoint);
handleBreakpoint(mediaQuery); // 立即执行一次，确保初始状态正确
动态设置 viewport 或字体基准
在某些特殊场景（如混合 WebView、PWA 或高 DPI 设备），可借助 JS 动态调整 或根元素字体大小，辅助 rem 布局：
立即学习“Java免费学习笔记（深入）”；
- 根据设备像素比（
window.devicePixelRatio）修正缩放 - 按屏幕宽度计算
document.documentElement.style.fontSize（用于 rem 适配） - 注意：现代响应式应优先用 CSS 的
clamp()或视口单位（vw/vmin），JS 调整仅作兜底
按需加载/切换 UI 组件
当屏幕太小，某些复杂组件（如侧边导航、宽表格、多列网格）体验差，可用 JS 判断后替换为更适合的形态：
- 检测
window.innerWidth，在移动端隐藏侧边栏，改用汉堡菜单 + 滑出面板 - 对图表库（如 Chart.js）调用
.resize()方法，或销毁重建以适配新容器尺寸 - 根据断点切换数据渲染方式：桌面显示完整表格，移动端改为卡片列表或折叠详情
配合 CSS 实现真正响应式
JavaScript 是“补充”，不是替代。必须与以下 CSS 技术协同：
-
@media查询控制显隐、布局方向（flex/grid）、间距 -
rem/em/vW单位实现弹性尺寸 -
clamp(1rem, 4vw, 1.5rem)实现流体字号 -
picture+srcset让浏览器自主选图（JS 可监听load后微调）
不复杂但容易忽略。
