跳到主要内容

H5 移动端适配

移动端网页的适配是 H5 移动端开发中的一个重要环节。由于设计稿通常是基于特定的分辨率设计的，而移动设备的屏幕尺寸和分辨率各不相同，因此适配的目标是让设计稿在各种设备上都能一致地显示。

下面主要介绍两点移动端网页适配方法：

Rem 布局适配​

这个方案利用的是动态改变 html 的 font-size 和 rem 单位来实现。

  1. 根元素 html 的 font-size = 设备视口宽 ÷ 份数 n (如 flexible.js 中的 n = 10).并且在浏览器视口发生变化的时候动态去改变.
  2. 设计稿也分为份数 n,元素 a rem = 元素 a px ÷ (设计稿的宽 ÷ n)

举个例子:

设备视口宽为 375px.设计稿宽为 750px,里面文字字号为 34px.

  • 将设备视口分成 10 份，设置 根元素 html 的 font-size = 375 ÷ 10 = 37.5 px，即 1 rem = 37.5 px
  • 字号换算成 rem 单位. font-size = 34 ÷ (750 ÷ 10 ) = 0.45 rem(保留两位小数)

移动端淘宝 可以看到 taobao 的移动端就采用了这种方案.

如果需要使用 rem 单位进行适配，推荐使用以下两个工具：

Viewport 布局​

vw 和 vh 是将视口 宽/高 都分成 100 份，相对于设备视口 375px 来说 1vw = 375 ÷ 100 = 3.75px,和 rem 方案基本类似.

将设计稿 750px 中的 34px 转换为 设备视口 n vw 就等于 n = 34 ÷ (750 ÷ 100 )= 4.53333 vw ≈ 4.53 vw。

vw/vh 和 rem 对比:

  • vw/vh 将视口分成 100 份,rem 可以自定义划分为 n 份.
  • vw/vh 适配更简单,不需要动态改变根元素 html 的 font-size.

移动端bilibili 可以看到 bilibili 的移动端就采用了这种方案,不过他使用的是 vmin 这个单位.

如果需要使用 viewport 单位 (vw, vh, vmin, vmax)，推荐使用 postcss-px-to-viewport 进行转换。

viewport meta​

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

用上面两个方案进行移动端适配时,需要将当前的宽度设置为设备宽度 width=device-width,一般还会禁用掉用户的缩放功能,因为缩放可能导致页面布局出现错乱user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1.

参考