移动端适配需设置viewport并处理DPR，JavaScript动态设置rem根字体、监听断点行为及触摸事件，辅助CSS实现响应式，确保多设备兼容。
移动端适配与响应式设计是现代前端开发中不可或缺的一环，尤其在使用 JavaScript 构建跨设备兼容的网页时。核心目标是让页面在不同尺寸的屏幕（如手机、平板、桌面）上都能良好展示和交互。JavaScript 在其中更多是辅助角色，配合 HTML 和 CSS 实现动态控制。
viewport 设置与 DPR 处理
页面在移动设备上的正确缩放依赖于 viewport meta 标签。必须在 HTML 中设置：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">这确保页面宽度等于设备宽度，初始缩放为 1，防止用户手动缩放。在此基础上，JavaScript 可用于获取设备像素比（DPR），实现高清显示：
- 通过 window.devicePixelRatio 判断物理像素与 CSS 像素的比例
- 动态加载 @2x 或 @3x 图片资源
- 结合 rem 或 vw 单位进行字体和布局微调
rem 与动态根字体计算
使用 rem 单位可实现整体布局的等比缩放。JavaScript 能动态设置 html 根元素的字体大小：
立即学习“Java免费学习笔记（深入）”；
- 监听 window.onresize 事件
- 根据设计稿宽度（如 750px）和当前屏幕宽度计算比例
- 设置 document.documentElement.style.fontSize = scale * 100 + 'px'
例如：若设计稿为 750px，当前屏幕 375px，则根字体设为 50px，此时 1rem = 50px，14px 字体可写为 0.28rem
响应式断点与行为控制
JavaScript 可监听窗口尺寸变化，针对不同设备执行特定逻辑：
- 使用 matchMedia 监听 CSS 媒体查询
- 例如：判断是否为移动端，切换导航菜单展开方式
- 在小屏幕上禁用某些桌面专属交互（如 hover）
- 动态加载或卸载组件，优化性能
mq.addEventListener('change', (e) => {
if (e.matches) { /* 移动端逻辑 */ }
});
触摸事件适配
移动端需用 touch 事件替代 mouse 事件：
- 使用 touchstart, touchmove, touchend 实现滑动、拖拽
- 注意 preventDefault 阻止默认滚动行为时的性能影响
- 封装轻量手势识别（如 swipe 左右滑）
- 兼容 PC 与移动双端时，可做能力检测 fallback
基本上就这些。JavaScript 不直接完成布局适配，而是增强响应式能力，处理动态逻辑和交互差异。核心仍靠 CSS 媒体查询与弹性单位，JS 起补充作用。不复杂但容易忽略细节。
