2022年了，h5常用的移动端适配方案不外乎以下这几种:
1、rem
将 html 节点的 font-size 设置为页面 clientWidth(布局视口)的 1/10，即 1rem 就等于页面布局视口的 1/10，这就意味着我们后面使用的 rem 都是按照页面比例来计算的
2、flexible 适配方案
rem的进阶方案，使用 js 动态来控制 viewport 的 width 和 scale 值适配高倍屏显示
3、viewport 适配方案
和上一种原理是差不多，但是使用vw、vh单位。
使用postcss-px-to-viewport库，可以把px转换成vw，并且动态设置meta 标签
上面几种方案大都有以下的几种缺点：
-
设计稿需换算
-
需要额外加入js库，js动态设置
meta -
使用js操作css时，单位需要进行换算
-
有精度误差，px转换成rem或vw时，是有小数的，到目前为止，每个浏览器对小数点的处理方式都不一样，会被ui小姐姐挑刺
现在使用的方案
设置meta的width为固定的750px(设计稿是使用750px进行设计的)，并禁止缩放user-scalable=no
<meta name="viewport" content="width=750,user-scalable=no"/>
不要设置initial-scale属性，当只设置width属性值，而不指定initial-scale属性值时，浏览器会自动缩放。
然后就可以直接使用
优点：
- 不需要加载额外js
- 设计稿1:1
- 不会有精度问题
- 使用js操作css像素单位也是1:1，不需要进行换算
目前发现的bug：
-
在ios15，使用
translate3d时，切换到其他app再切回来，会出现黑线的bug，ios14以下没有这个问题。
目前已在几个项目上使用了这套方案，暂无发现其他问题
