H5 如何解决移动端适配问题

移动端适配问题是指如何让⽹⻚在不同的移动设备上显⽰效果相同。下⾯是⼀些常⻅的 H5 移动端适配

⽅案：

1. 使⽤ viewport 标签

通过设置 viewport 标签的 meta 属性，来控制⻚⾯的缩放⽐例和宽度，以适配不同的设备。例如：

<meta name="viewport" content="width=device-width, initial-scale=1.0"

其中 width=device-width 表⽰设置 viewport 的宽度为设备宽度， initial-scale=1.0 表

⽰初始缩放⽐例为 1。

1. 使⽤ CSS3 的媒体查询

通过 CSS3 的媒体查询，根据不同的设备宽度设置不同的样式，以适配不同的设备。例如：

1 arduinoCopy code@media screen and (max-width: 640px) {/* 样式 */
2 }

其中 max-width 表⽰最⼤宽度，当屏幕宽度⼩于等于 640px 时，应⽤这些样式。

1. 使⽤ rem 单位 通过将 px 转化为 rem 单位，根据不同的设备字体⼤⼩设置不同的样式，以适配不同的设备。例如：

 html {font-size: 16px;
2 }@media screen and (max-width: 640px) {html {font-size: 14px;}
3 }
4
5 div {width: 10rem;
6 }

其中 font-size: 16px 表⽰将⽹⻚的基准字体⼤⼩设置为 16px， font-size: 14px 表⽰在

屏幕宽度⼩于等于 640px 时将基准字体⼤⼩设置为 14px， div 元素的 width: 10rem 表⽰该元

素的宽度为 10 个基准字体⼤⼩。

1. 使⽤ flexible 布局⽅案

通过使⽤ flexible 布局⽅案，将 px 转化为 rem 单位，并且动态计算根节点的字体⼤⼩，以适配不同的

设备。例如使⽤ lib-flexible 库：

1 arduinoCopy code// index.html
2 <script src="https://cdn.bootcdn.net/ajax/libs/lib-flexible/0.3.4/flexible.js"
</script
3 // index.js
4 import 'lib-flexible/flexible.js'

其中 flexible.js 会在⻚⾯加载时动态计算根节点的字体⼤⼩，并将 px 转化为 rem 单位。在样

式中可以直接使⽤ px 单位，例如：

1 div {width: 100px;height: 100px;
2 }

这个 div 元素的⼤⼩会根据设备屏幕的宽度进⾏适配。