移动端适配方案——postcss-px-to-viewport

本文为转载，原文链接：

https://blog.csdn.net/Cookysurongbin/article/details/99671673

---

之前做移动端适配时，基本上是采用rem方案，现在发现了一个新的方案，就是用viewport单位，现在viewport单位越来越受到众多浏览器的支持。
postcss-px-to-viewport，将px单位自动转换成viewport单位，用起来超级简单。postcss-px-to-viewport 文档

• 安装

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

• 引入vue项目，再postcss.config.js引入

module.exports = {
  plugins: {
    autoprefixer: {},
    'postcss-px-to-viewport': {
       viewportWidth: 750,   // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
      viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
      unitPrecision: 3,     // 指定`px`转换为视窗单位值的小数位数
      viewportUnit: "vw",   //指定需要转换成的视窗单位，建议使用vw
      selectorBlackList: ['.ignore'],// 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
      minPixelValue: 1,     // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
      mediaQuery: false     // 允许在媒体查询中转换`px`
    }
  }
}

• 设置参数解析

{
  unitToConvert: 'px'	//(String) 要转换的单位
  viewportWidth: 320,	//viewport的宽度，默认320，可以根据设计稿来修改。1440就写1440
  unitPrecision: 5,	//指定px转换为视窗单位值的小数位数，默认是5
  propList: ['*'],	//指定可以转换的css属性，默认是['*'],代表全部属性进行转换
  viewportUnit: 'vw', //(String) 指定要转换成的视窗单位，默认vw
  fontViewportUnit: 'vw', //(String) 指定字体需要转换成的视窗单位，默认vw
  selectorBlackList: [], //指定不转换为视窗单位的类，保留px，值为string或正则regexp，建议1~2个通用的类名。
  minPixelValue: 1,	//(Number)默认值1，小于或等于`1px`不转换为视窗单位。
  mediaQuery: false, //是否在媒体查询时也转换px,默认false。
  replace: true, // 替换包含vw的规则，而不是添加回退。
  exclude: [], //设置忽略文件,如node_modules
  landscape: false,
  landscapeUnit: 'vw',
  landscapeWidth: 568
}

可能会遇到的问题

1、@keyframes 和media查询里的px默认是不转化的，设置mediaQuery： true则媒体查询里也会转换px，@keyframes可以暂时手动填写vw单位的转化结果。
2、如果发现有某些样式并没有进行转换，请检查该样式是否是内联样式，vue模板需要将样式写在style标签内转换才能生效。