vue移动端/pc端适配插件：postcss-px-to-viewport

Posted 2022-10-31 coderkey

问题：

vue项目做PC端或者移动端适配；
使用postcss-px-to-viewport插件，将px单位自动转换成viewport单位；

---

解决方法：

第一步：

安装

npm install postcss-px-to-viewport --save-dev
// 或  npm install postcss-px-to-viewport -D

第二步：

在根目录下新建postcss.config.js文件；

第三步：

在postcss.config.js文件里配置以下代码；

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

---

注意：

propList: 当有些属性的单位我们不希望转换的时候，可以添加在数组后面，并在前面加上!号，如propList: ["*","!letter-spacing"],这表示：所有css属性的属性的单位都进行转化，除了letter-spacing的

---

兼容ui组件库vant：

问题：

vant团队的是根据375px的设计稿去做的，理想视口宽度为375px;
而自己的设计稿750px，这样就出现比例问题；

方法：

在postcss.config.js文件里配置以下代码；

const path = require('path');
 
module.exports = ( file ) => 
  const designWidth = file.dirname.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

重新运行后发现，不仅vant相关组件的单位被转换成了vw，而且其比例也就没有问题了。

---