移动端适配解决方案

目前移动端的适配方案一般就是两种，一个是 rem 方案，一个就是 vw 的方案，本篇就是一次性讲清楚如何去运用这两种方案来解决问题。
项目地址：https://github.com/Ewall1106/mall

关于 rem

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

安装 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之类的值。

配置

• 我们项目是用最新的vue-cli4.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