vue2.0_移动端自适应布局之 postcss-px-to-viewport（兼容vant-ui）

前言

  一般我们在做vue的移动端项目时，为了能够自适应不同分辨率，就需要根据UI设计稿的宽高进行px与rem、em的比例换算。但是这样做非常繁琐，为了解决这个问题，我们直接使用当前比较流行的插件 postcss-px-to-viewport 去配置相应的属性来进行自适应布局的构建。

关于px、em、rem的区别详解可点击此处了解

postcss-px-to-viewport(将px单位自动转换成viewport单位)

安装插件

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

在项目根目录中找到或者创建 .postcssrc.js 文件，添加如下的配置：

module.exports = {
   
  "plugins": {
   
    "postcss-import": {
   },
    "postcss-url"