一次讲清手机端适配处理方案—rem和vw

目前手机端的适配方案一般就是两种，一个是rem方案，一个就是vw的方案，本篇就是一次性讲清楚如何去运用这两种方案来处理问题。
panda-vue-template
手把手搭建vue小商城2.0

1、关于rem

• rem的原理什么的我就不说了，网上搜文章一搜一大把。
• 一般是使用手淘的lib-flexible.js，但是这个作为一种过渡方案已经被废弃了，目前已不推荐在你的新项目中使用这个方案来处理手机适配问题。
• 感兴趣可以看看我老早以前写的这篇–>手机适配问题之rem和lib-flexible,我们主要还是来谈谈如何用vw来处理这个手机适配问题。

2、安装postcss

• 要实现使用vw来实现手机端的适配，我们先需要安装postcss。一般来说是这样：

$ npm i postcss-loader --save-dev

• 对于postcss我以前在webpack从0到1-less、sass、postcss
  就提到过，可以将它了解为是一个平台化的概念，有很多插件被大家开发出来为它赋能，实现vw适配就是要利用这么一个插件：postcss-px-to-viewport，先安装它：

$ npm install postcss-px-to-viewport --save-dev

• 它可以将我们设置px值自动转化为相应的vw、vh之类的值。

3、配置

• 假如你的项目是用最新的vue-cli3.x来构建了，那么我们连postcss-loder都不用安装，它内部就使用了它。
• 但是一般我一般更加倾向于新建一个postcss.config.js来配置这部分内容，这样可能更加直观点吧。

module.exports = {  plugins: {    'postcss-px-to-viewport': {      unitToConvert: 'px',      viewportWidth: 750,      unitPrecision: 3,      propList: ['*'],      viewportUnit: 'vw',      fontViewportUnit: 'vw',      selectorBlackList: ['.ignore'],      minPixelValue: 1,      mediaQuery: false,      replace: true,      exclude: [],      landscape: false,      landscapeUnit: 'vw',      landscapeWidth: 568    }  }}

• 各参数的含义：postcss-px-to-viewport

4、小结

• 其实使用vw来实现手机端的适配还是比较简单的，主要就是使用postcss-px-to-viewport这个插件。
• 大概就这么多吧。

参考链接：
https://juejin.im/entry/5aa09c3351882555602077ca
evrone/postcss-px-to-viewport/blob/master/README_CN.md
https://cli.vuejs.org/zh/guide/css.html