Vue-cli 3如何进行多端适配

导语：这两天搭建呱聊UIBot前端框架，遇到了vue模板的多端适配问题，在查询了众多解决方案后，确定使用postcss-px-to-viewport来解决。

• UIBot前端框架模板可以通过bot-cli来获取
• bot-cli 的 npm源地址：https://www.npmjs.com/package/bot-cli

一、多端适配概念

• 多端适配其实已经是个老生常谈的话题了，随着移动端的兴起到趋于稳定，WEB也已经发展到相对成熟的阶段。在经历了一番番的更新演进后，业界有了非常丰富的多端适配的方案。PC与移动也从分离 → 融合 → 分离走了完整的一个过程。
• 多端适配应该是一套完整的，能同时兼容PC、移动端这两大类主流设备的WEB方案。

二、多端适配方案

• 整理了近一段时间前端常见的适配方案：

1. 固定一个某些宽度，使用一个模式，加上少许的媒体查询（media）方案
2. 使用flexbox解决方案
3. 使用百分比加媒体查询
4. 使用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