vue项目 配置px转vw单位适配

下载 px转vw单位的包 postcss-px-to-viewport

下载自动css管理浏览器前缀的插件 autoprefixer

安装:

• yarn add postcss-px-to-viewport
• yarn add autoprefixer

 根目录下创建.postcssrc.js文件，配如下代码

module.exports = {
  plugins: {
    //autoprefixer 是一款自动管理浏览器前缀的插件
    autoprefixer: {},
    'postcss-px-to-viewport': {
      unitToConvert: "px",
      viewportWidth: 1920, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
      unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
      viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
      fontViewportUnit: "vw",
      selectorBlackList: ['.ig-'], // <div class="ig-aa"></div> 指定不转换为视窗单位的类，在该类型名下写不会转换为vw，可以无限添加,建议定义一至两个通用的类名
      minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
      mediaQuery: false, // 允许在媒体查询中转换`px`
      replace: true,
      exclude: /(\/|\\)(node_modules)(\/|\\)/
    },
  }
}