跳到主要内容

H5 移动端适配

面试速答（30 秒版 TL;DR）​

  • 移动端适配的核心问题是：同一套页面如何在不同屏宽、不同 DPR、不同系统控件环境下保持可用和可读。
  • 主流思路不是单选题，而是组合拳：viewport + 弹性布局 + 相对单位（rem / vw / %）+ 媒体查询 + 安全区处理。
  • 工程里最重要的是先选统一尺度方案，不要项目里一半 rem 一半 vw 再混一堆固定像素。
  • 一句话记忆：适配解决的是“看起来合理”，兼容解决的是“能不能正常工作”。

先区分：适配和兼容不是一回事​

  • 兼容：功能能不能正常运行
  • 适配：页面在不同设备上看起来是否合理

比如：

  • 按钮点不了，是兼容问题
  • 按钮能点，但在小屏上挤爆了，是适配问题

移动端适配的目标​

通常至少包括三件事：

  1. 布局不乱
  2. 文字可读
  3. 点击区域足够大

一套常见适配方案长什么样​

先记主链路：先定视口，再定尺度，再处理断点和特殊设备。

1. viewport 是基础​

移动端页面通常会先写：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

核心作用：

  • 让布局视口贴近设备宽度
  • 避免浏览器按桌面网页方式缩放整个页面

实际项目里，maximum-scale=1、user-scalable=no 是否使用，要结合无障碍需求审慎决定。

2. 常见适配单位方案​

方案一：rem 方案​

思路：

  • 页面尺寸都基于根字体大小换算
  • 根字体大小随屏宽变化
function refreshRem() {
  const width = document.documentElement.clientWidth
  document.documentElement.style.fontSize = `${width / 10}px`
}

refreshRem()
window.addEventListener('resize', refreshRem)

优点：

  • 适配规则统一
  • 设计稿换算体系成熟

缺点：

  • 依赖根字号计算
  • 混用固定像素时容易失控

方案二：vw 方案​

思路：

  • 直接按视口宽度百分比布局
.title {
  font-size: 4.8vw;
}

优点：

  • 直观
  • 不依赖额外 JS

缺点：

  • 大屏和超小屏可能极端化
  • 往往需要上限、下限或媒体查询辅助

方案三：弹性布局为主，单位方案为辅​

现代项目很常见的实践是：

  • 容器层面用 flex / grid
  • 字体和间距用相对单位
  • 局部配合媒体查询微调

这比纯数学换算更符合真实页面需求。

3. 图片、字号、点击区域怎么适配​

图片​

img {
  max-width: 100%;
  height: auto;
}

避免：

  • 图片写死宽高导致小屏溢出

字号​

要避免两个极端：

  • 全部写死，小屏过大或大屏过小
  • 全部跟屏宽线性缩放，极端设备上不可读

更稳妥的做法：

  • 关键字号设上下限
  • 重要文本优先保证可读性，而不是绝对等比

点击区域​

移动端按钮和可点击元素需要足够大，避免“看得见、点不中”。

4. 媒体查询是兜底工具，不是全部方案​

@media (min-width: 768px) {
  .container {
    max-width: 720px;
    margin: 0 auto;
  }
}

媒体查询适合做：

  • 平板和手机布局切换
  • 大屏限制最大宽度
  • 特定断点微调

但不适合把所有尺寸问题都交给断点硬编码。

5. 安全区和动态视口也要纳入适配​

现在的适配不能只盯屏宽，还要考虑：

  • 刘海屏安全区
  • 底部手势区域
  • 地址栏动态高度
.footer {
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

工程上怎么选方案​

如果面试官问“rem 和 vw 怎么选”，可以这样回答：

  • 营销页 / 强视觉页面：vw 往往更直接
  • 中后台或复杂业务页：弹性布局 + 局部相对单位通常更稳
  • 老项目或现成设计体系：跟随团队已有方案，避免混乱

比“哪个更先进”更重要的是：

整个项目要有统一尺度体系。

典型题 & 标准答法​

Q1：移动端适配常用方案有哪些？​

答：基础是 viewport。其上常见方案有 rem、vw、百分比、弹性布局和媒体查询。实际项目通常不是单独用某一种，而是用弹性布局做结构、自适应单位做尺寸、媒体查询做断点兜底，再配合安全区处理。

Q2：rem 和 vw 有什么区别？​

答：rem 是基于根字体大小的相对单位，适合建立统一换算体系；vw 直接相对视口宽度，更直观，但在超大屏和超小屏容易极端化。工程上要结合页面类型和团队规范选择，不建议混乱并用。

Q3：为什么说移动端适配不是只改单位？​

答：因为真正的适配还包括布局伸缩、图片处理、字号可读性、点击区域、安全区、动态视口高度等问题。只把 px 换成 rem 或 vw，并不能自动解决所有适配问题。

常见追问​

  • rem 方案为什么常配合 750 设计稿？
  • 为什么 vw 在某些场景下会导致字体过大或过小？
  • 平板要不要单独做一套布局？

易错点​

  • 不要把适配方案说成“唯一正确答案”。真实项目通常是组合策略。
  • 不要全站机械使用 100vw/100vh。
  • 不要忽略安全区、动态地址栏、横屏场景。

速记要点​

  • 适配先定尺度体系，再谈细节。
  • 布局优先弹性，尺寸优先相对单位，特殊点再用媒体查询兜底。
  • 适配关注的是视觉与交互体验的一致性。