vue 移动端实现自动适配 postcss-px-to-viewport

Posted 2022-12-02 奥特曼　

postcss-px-to-viewport 是一款 PostCSS 插件，用于将 px 单位转化为 vw/vh 单位。

1.安装

npm install postcss-px-to-viewport -D
# or
yarn add -D postcss-px-to-viewport
# or
pnpm add -D postcss-px-to-viewport

2.postcss.config.js

// eslint-disable-next-line no-undef
module.exports = 
  plugins: 
    'postcss-px-to-viewport': 
      // 设备宽度375计算vw的值
      viewportWidth: 375, // 设计图大小
    ,
  ,
;

如果设计图大小是375 就设置375就好了 750 同理

转换成vw 相当于 375就是100vw

3. 重启 运行项目

补充：如果设计图是750的话需要单独判断，因为vant是根据375设计稿去做的，如果是读取vant目录文件的话采用375 其他采用750

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

第二种适配方式可参考：Vue ——lib-flexible + postcss-pxtorem 简单实现rem适配