导语：这两天搭建呱聊UIBot前端框架，遇到了vue模板的多端适配问题，在查询了众多解决方案后，确定使用postcss-px-to-viewport来解决。
- UIBot前端框架模板可以通过bot-cli来获取
- bot-cli 的 npm源地址：https://www.npmjs.com/package/bot-cli
一、多端适配概念
- 多端适配其实已经是个老生常谈的话题了，随着移动端的兴起到趋于稳定，WEB也已经发展到相对成熟的阶段。在经历了一番番的更新演进后，业界有了非常丰富的多端适配的方案。PC与移动也从分离 → 融合 → 分离走了完整的一个过程。
- 多端适配应该是一套完整的，能同时兼容PC、移动端这两大类主流设备的WEB方案。
二、多端适配方案
- 整理了近一段时间前端常见的适配方案：
- 固定一个某些宽度，使用一个模式，加上少许的媒体查询（media）方案
- 使用flexbox解决方案
- 使用百分比加媒体查询
- 使用rem这种相对像素单位
- 下面介绍几种常用的适配方案：
1、用px2rem配合lib-flexible
- 关于移动端的适配，可以用px2rem配合lib-flexible，非常方便。vue-cli3.0后，项目配置被大大精简了，这使得原来配置px2rem的文件不复存在，但其实只要掌握了正确的姿势，配置方法比原来更简单。
lib-flexible
- 作用：让网页根据设备dpr和宽度，利用viewport和html根元素的font-size配合rem来适配不同尺寸的移动端设备
- 安装：yarn add lib-flexible postcss-pxtorem 或者 npm install lib-flexible postcss-pxtorem
- 引入：入口文件main.js中：import 'lib-flexible/flexible.js
- 代码配置：
"postcss": {
"plugins": {
"autoprefixer": {},
"postcss-pxtorem": {
"rootValue": 75, // 设计稿宽度的1/10,（JSON文件中不加注释，此行注释及下行注释均删除）
"propList":["*"] // 需要做转化处理的属性，如`hight`、`width`、`margin`等，`*`表示全部
}
}
}
- 值得注意的是，开发者在其github留下过一句话：
由于viewport单位得到众多浏览器的兼容，lib-flexible这个过渡方案已经可以放弃使用，不管是现在的版本还是以前的版本，都存有一定的问题。建议大家开始使用viewport来替代此方案。
由此，我开始介绍第二种使用 viewPort 的vw、vh、vmax、vmin来解决移动端适配的解决方案。
2、引入 postcss-px-to-viewport 插件
-
postcss-px-to-viewport的viewport以vw 与 vh单位，以viewport为基准，1vw 与 1vh分别为
view width、view height的百分之一。
postcss-px-to-viewport
- 作用：将px单位转换为视口单位的 (vw, vh, vmin, vmax) 的 PostCSS 插件.
- 安装：yarn add postcss-px-to-viewport -D 或 npm i postcss-px-to-viewport -save-dev
- 代码配置：
"postcss": {
"plugins": {
"autoprefixer": {},
"postcss-px-to-viewport": {
"viewportWidth": 750, // 设计稿的视口宽度
"minPixelValue": 1 // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
}
}
}
例子：
- 输入：
.class {
margin: -10px .5vh;
padding: 5vmin 9.5px 1px;
border: 3px solid black;
border-bottom-width: 1px;
font-size: 14px;
line-height: 20px;
}
.class2 {
border: 1px solid black;
margin-bottom: 1px;
font-size: 20px;
line-height: 30px;
}
@media (min-width: 750px) {
.class3 {
font-size: 16px;
line-height: 22px;
}
}
- 输出：
.class {
margin: -3.125vw .5vh;
padding: 5vmin 2.96875vw 1px;
border: 0.9375vw solid black;
border-bottom-width: 1px;
font-size: 4.375vw;
line-height: 6.25vw;
}
.class2 {
border: 1px solid black;
margin-bottom: 1px;
font-size: 6.25vw;
line-height: 9.375vw;
}
@media (min-width: 750px) {
.class3 {
font-size: 16px;
line-height: 22px;
}
}
- 具体配置参数可以参考 github：postcss-px-to-viewport
