526互联

使用750设计稿，px转vw，同时兼容vant

发布时间 2023-07-25 19:04:52作者: ╰透在骨子里的小傲娇

vant官网上推荐使用postcss-px-to-viewport 进行转换。

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

因为vant自身使用的是375大小，网上其他的资料也都用375，可是自己使用的是750设计稿，所以想用750的执念就起来了，研究了一番配置如下。

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

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 750, // vant是用375设计稿
      exclude: [/node_modules\/vant/] // 这里排除对vant的转换
    },
  },
};