移动端适配 postcss-px-to-viewport

 将px单位转换为视口单位的 (vw, vh, vmin, vmax) 的 PostCSS 插件.

如果你的样式需要做根据视口大小来调整宽度，这个脚本可以将你CSS中的px单位转化为vw，1vw等于1/100视口宽度。

安装上手

使用npm安装

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

或者使用yarn进行安装

$ yarn add -D postcss-px-to-viewport

1. 在项目根目录下添加.postcssrc.js文件
2. 添加如下配置：

   module.exports = {
     plugins: {
       autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀，如-webkit-，-moz-等等
       "postcss-px-to-viewport": {
         unitToConvert: "px", // 要转化的单位
         viewportWidth: 750, // UI设计稿的宽度
         unitPrecision: 6, // 转换后的精度，即小数点位数
         propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
         viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw
         fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
         selectorBlackList: ["wrap"], // 指定不转换为视窗单位的类名，
         minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
         mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
         replace: true, // 是否转换后直接更换属性值
         exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
         landscape: false // 是否处理横屏情况
       }
     }
   };

   需要注意的配置

• propList: 当有些属性的单位我们不希望转换的时候，可以添加在数组后面，并在前面加上!号，如propList: ["*","!letter-spacing"],这表示：所有css属性的属性的单位都进行转化，除了letter-spacing的
• selectorBlackList：转换的黑名单，在黑名单里面的我们可以写入字符串，只要类名包含有这个字符串，就不会被匹配。比如selectorBlackList: ['wrap'],它表示形如wrap,my-wrap,wrapper这样的类名的单位，都不会被转换

关于兼容第三方UI库

当然，当我们引入一些第三方库的时候，比如vant，上面配置的exclude去掉，表示全部内容进行vw转换，会遇到些问题：

让我们回到webpack本身，重新看一下这份.postcssrc.js文件，它除了暴露一个对象，也可以暴露一个函数，无论暴露什么，在webpack运行时，都会被我们配置的海量文件读取并执行。

暴露函数有一个好处，可以拿到webpack运行的当前执行文件的信息。

那么我们可以有这样一个思路：如果读取的是vant相关的文件，viewportWidth就设为375，如果是其他的文件，我们就按照我们UI的宽度来设置viewportWidth，即750。

改写.postcssrc.js文件配置如下：

const path = require('path');
 
module.exports = ({ webpack }) => {
  const designWidth = webpack.resourcePath.includes(path.join('node_modules', 'vant')) ? 375 : 750;
 
  return {
    plugins: {
      autoprefixer: {},
      "postcss-px-to-viewport": {
        unitToConvert: "px",
        viewportWidth: designWidth,
        unitPrecision: 6,
        propList: ["*"],
        viewportUnit: "vw",
        fontViewportUnit: "vw",
        selectorBlackList: [],
        minPixelValue: 1,
        mediaQuery: true,
        exclude: [],
        landscape: false
      }
    }
  }
 
}

注意：这里使用path.join('node_modules', 'vant')是因为适应不同的操作系统，
在mac下结果为node_modules/vant，而在windows下结果为node_modules\vant
复制代码

文章转自移动端布局之postcss-px-to-viewport_barnett_y的博客-CSDN博客