一、认识CSS相对单位

在移动端适配中，我们需要考虑不同设备的屏幕尺寸、像素密度和方向等因素。CSS提供了许多相对单位， 如下：

相对单位	相对于
em	在font-size中使用是相对于父元素的字体大小。在其他属性中使用的是相对于自身的字体大小，如width
ex	字符"x"的高度
ch	数字"0"的宽度
rem	根元素的字体大小
lh	元素的line-height
vw	视窗宽度的1%
vh	视窗高度的1%

二、适配方案

1、媒体查询

使用CSS3的媒体查询功能，根据不同的屏幕尺寸和方向，应用不同的样式规则。通过设置不同的样式，可以适配不同的设备。个人认为是一种相对比较麻烦的方案，需要在每个页面上写媒体查询的代码。

2、百分比布局

使用百分比单位设置元素的宽度、高度和边距等。这样可以根据父元素的尺寸自动调整子元素的大小，实现一定程度的自适应效果。

因为不同属性的百分比值，相对的可能是不同的参照物，所以百分比往往很难统一，在移动端适配中使用是非常少的。

3、弹性盒子布局

使用CSS3弹性盒子布局模型，通过设置弹性容器和弹性项目的属性，实现灵活的布局。弹性盒子布局可以根据容器的尺寸和内容的大小，自动调整项目的 布局和排列。

4、rem单位 + 动态的font-size

使用rem（根元素字体大小的倍数）作为单位来设置元素的尺寸。通过设置根元素的字体大小，可以控制整个页面的缩放比例，从而实现不同设备的适配。

const htmlEl = document.documentElement
function setRemUnit(){
  const htmlWidth = htmlEl.clientWidth
  const htmlFontSize = htmlWidth / 10
  htmlEl.style.fontSize = htmlFontSize + 'px'
}
setRemUnit()
window.addEventListener("resize",setRemUnit)

5、Viewport单位

使用viewport单位（例如vw、vh、vmin、vmax）来设置元素的尺寸。viewport单位是相对于视口（浏览器窗口）的尺寸来计算的，可以根据视口的大小进行自适应布局。（个人推荐使用这种方案，原因在下文会提到）

6、CSS预处理器的mixin和函数

使用CSS预处理器（如Sass或Less）的mixin和函数功能，可以根据不同的设备尺寸生成对应的样式代码。通过定义不同的mixin或函数，可以根据需要生成不同的样式规则。

三、 个人推荐

本人推荐vw适配方案，之所以推荐此种方案，vw相对于rem的优势如下：

• 优势一：不需要去计算html的font-size大小，也不需要给html设置这样一个font-size；
• 优势二：不会因为设置html的font-size大小，而必须给body再设置一个font-size，防止继承；
• 优势三：因为不依赖font-size的尺寸，所以不用担心某些原因html的font-size尺寸被纂改，页面尺寸混乱；
• 优势四：vw相对于rem更加语义化，1vw刚好是1/100的viewport的大小；
• 优势五：可以具备rem之前所有的优点；

以上是一些常见的移动端适配方案，每种方案都有其使用的场景和特点。根据具体项目需求和开发团队的偏好，可以选择适合的方案来进行移动端适配。

欢迎关注公众号---代码分享站