2022-09-20-🌦🌦移动端适配方案选择

一.Flexible方案

核心思路：利用终端宽度，设置body font-size 适配rem。

根据上述方案，我们需要将设计稿中的 px 转化为 rem，如果每一次都需要自己计算 px 转换 rem，就太麻烦了。为了简化改过程，衍生出很多 px 转换 rem 的小工具。其中使用最为广泛的是 postcss-px2rem 。使用该用具，在实际开发中直接按照设计稿写 px 就可以了。

示例：

.selector {
    width: 150px;
    height: 64px; /*px*/
    font-size: 28px; /*px*/
    border: 1px solid #ddd; /*no*/
}

使用插件转换后：

.selector {
    width: 2rem;
    border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
    height: 32px;
    font-size: 14px;
}
[data-dpr="2"] .selector {
    height: 64px;
    font-size: 28px;
}
[data-dpr="3"] .selector {
    height: 96px;
    font-size: 42px;
}

文本字号不建议使用 rem。前面大家都见证了如何使用 rem 来完成 H5 适配。那么文本又将如何处理适配。是不是也通过rem来做自动适配。显然，我们在 iPhone3G 和 iPhone4 的 Retina 屏下面，希望看到的文本字号是相同的。也就是说，我们不希望文本在 Retina 屏幕下变小，另外，我们希望在大屏手机上看到更多文本，以及，现在绝大多数的字体文件都自带一些点阵尺寸，通常是 16px 和 24px，所以我们不希望出现 13px 和 15px 这样的奇葩尺寸。如此一来，就决定了在制作 H5 的页面中，rem 并不适合用到段落文本上。

总结一下，使用动态 rem 方案需要做的工作：

1. meta 标签设置 viewport 宽度为屏幕宽度；
2. 根据不同屏幕修改根元素 font-size 大小，一般设置为屏幕宽度的十分之一（可引入 lib-flexible 库，或者自己写相应逻辑）；
3. 开发环境配置 postcss-px2rem 或者类似插件；
4. 根据设计稿写样式，元素宽高直接取设计稿宽高即可，单位为 px，插件会将其转换为 rem；
5. 段落文本也按照设计稿写，单位为px，不需要转换为 rem；

缺点：

flexible对dpr一刀切，无法正确适配屏幕字体。

lib-flexible 文档中有如下一段话，表示 flexible 方案已经可以废弃，推荐使用 vw 视口单位进行适配。

由于 viewport 单位得到众多浏览器的兼容，lib-flexible 这个过渡方案已经可以放弃使用，不管是现在的版本还是以前的版本，都存有一定的问题。建议大家开始使用 viewport 来替代此方案。

二、Viewport方案

核心思路：利用跟元素百分比，子元素都可以使用 这个百分比。有人会问，为什么不直接使用100%呢，因为浏览器的子元素只能继承父元素的高宽，不能继承根元素的百分比。

vw单位换算：如果按照375的设计稿为基础， 视口宽度为 100vw 占满整个视口区域，那么 1vw 相当于占整个视口宽度的1%，所以 1px= 1/375*100 vw 所有的页面元素都可以直接进行计算换算成 vw 单位，但是这样计算和百分比方案计算比较类似，都会比较麻烦。

vw 适配方案的流程：

1. meta 标签设置 viewport 宽度为屏幕宽度；
2. 开发环境配置 postcss-px-to-viewport 或者类似插件；
3. 根据设计稿写样式，元素宽高直接取设计稿宽高即可，单位为 px，插件会将其转换为 vw；
4. 段落文本也按照设计稿写，单位为px，不需要转换为 vw；

# Web移动端最强适配方案总结，没想到这么好用！
# 移动端适配原理与方案详解