移动端web适配方案

以下是移动端适配的多个方案，也可以说说你是怎么做的。

正文

• 自适应：根据不同的设备屏幕大小来自动调整尺寸、大小

• 响应式：会随着屏幕的实时变动而自动调整，是一种更强的自适应

为什么要做移动端适配？

目前市面上移动端屏幕尺寸非常的繁多，很多时候我们希望一个元素在不同的屏幕上显示不同的大小以此来更好的还原效果图：

• 当我们针对一个手机进行布局设计时，设置了一个 200 * 200 大小的盒子

• 但在不同的设备上，由于逻辑像素不同的问题，会使得这个盒子在更大的视口上显得很小，在更小的视口上显示很大

• 因此我们需要进行适配让它在不同设备上所占据视口的空间比例是相同的

当前流行的几种适配方案

• 方案一：百分比设置（不推荐）

  • 因为不同属性的百分比值，相对的可能是不同参照物，所以百分比往往很难统一

  • 所以百分比在移动端适配中使用是非常少的

• 方案二：rem单位+动态html的font-size

• 方案三：vw单位（推荐）

• 方案四：flex的弹性布局

rem + 动态设置 font-size

rem 单位是相对于 html 元素的 font-size 来设置的，通过在不同屏幕尺寸下，动态的修改 html 元素的 font-size 以此来达到适配效果

在开发中，我们只需要考虑两个问题：

• 针对不同的屏幕，设置 html 不同的 font-size

• 将原来设置的尺寸，转化成 rem 单位

font-size 的尺寸

屏幕尺寸	html的font-size	盒子的设置宽度	盒子的最终宽度
375px	37.5px	1rem	37.5px
320px	32px	1rem