vue-cli 3.0中使用postcss-px-to-viewport或postcss-pxtorem实现移动端自动适配

postcss-pxtorem和postcss-px-to-viewport都是PostCSS的插件，用于将像素单元生成rem单位或者vw单位。

前端开发还原设计稿的重要性毋庸置疑，目前应用的单位最多还是rem,然而每次在制作过程中需要自己计算rem值，为了能够直接按照设计图的尺寸开发，并且能自动编译转换成rem，下面就来分享下postcss-pxtorem的使用。

1.安装依赖

npm install postcss postcss-loader postcss-pxtorem -D

2.设置规则（添加postcss.config.js）

module.exports = {
  plugins: {
    // 这个工具可以实现自动添加CSS3前缀
    "autoprefixer": {
      overrideBrowserslist: ["last 5 version", ">1%", "ie >=8"]
    },
    // 如果你使用rem来实现移动端多设备适配，这个工具可以把px转换为rem
    "postcss-pxtorem": {
      rootValue: 100, // 指定转换倍率，我现在设置这个表示1rem=100px;
      propList: ["*"], // 属性列表，表示你要把哪些css属性的px转换成rem，这个*表示所有
      minPixelValue: 1, // 需要转换的最小值，一般1px像素不转换，以上才转换
      unitPrecision: 6, // 转换成rem单位的小数点后的保留位数
      selectorBalckList: ["van"], // 匹配不被转换为rem的选择器
      replace: true, // 替换包含rem的规则，而不是添加回退
      mediaQuery: false // 允许在媒体查询中转换px
    }
  }
}

操作到这里移动端自动适配了吗，当然不能，目前只是将px单位转换成rem,移动端适配还差最后一步,设置根元素(html)的字体大小；

3.在src下新建/style/index.css：

*{
  margin: 0;
  /* touch-callout:none; */
  -webkit-touch-callout:none;
  -moz-touch-callout:none;
  -ms-touch-callout:none;
  -webkit-overflow-scrolling:touch;
}
a,img,button,input,textarea,div{-webkit-tap-highlight-color:rgba(255,255,255,0);}
html{
  height: 100%;
  overflow: hidden;
  font-size: calc(100vw * 100 / 375);
}
body{
  height: 100%;
  font-size: 16px
}
.app{
  height: 100%
}
.page{
  height: 100%
}

以上CSS文件设置了页面的初始样式，并为html标签设置了字体大小

4.在main.js中引入CSS文件

// main.js引入初始化样式
import "./style/index.css"

最后刷新页面看下，就会发现原本用px的单位已经自动换算成了rem;

以上是将px转换成rem的方法来适配的，还有一种方式是将px转换成vw的方式；设置流程和postcss-pxtorem基本一致，只是在配置postcss.config.js略有差异

1.安装依赖

npm install postcss postcss-loader postcss-px-to-viewport -D

 2.设置规则（添加postcss.config.js）

module.exports = {
  plugins: {
    // 这个工具可以实现自动添加CSS3前缀
    "autoprefixer": {
      overrideBrowserslist: ["last 5 version", ">1%", "ie >=8"]
    },
    // 如果你使用vw来实现移动端多设备适配，这个工具可以把px转换为vw
    "postcss-px-to-viewport": {
       unitToConvert: 'px', // 把什么单位转换成vw
       viewportWidth: 750, // 这个可以按照你的设计稿来设置，是750就设置750，375就设置成375
       unitPrecision: 6, // 转换成vw单位的小数点后的保留位数
       propList: ['*'], // 属性列表，表示你要把哪些css属性的px转换成vw，这个*表示所有
       viewportUnit: 'vw', // 使用的单位，目前可选单位有vw,vh。一般我们都有vw
       fontViewportUnit: 'vw', // 字体使用的单位
       selectorBlackList: [], // 匹配不被转换为vw的选择器
       minPixelValue: 1, // 需要转换的最小值，一般1px像素不转换，以上才转换
       mediaQuery: false, // 允许在媒体查询中转换px
       replace: true, // 替换包含vw的规则，而不是添加回退
       exclude: [], // 忽略一些文件，比如“node_modules”，可以是正则表达式
       landscape: false,  // ......
       landscapeUnit: 'vw', // ......
       landscapeWidth: 568 // ......
    }
  }
}

后面的步骤同上边的步骤3、4一致；