vue h5自适应屏幕

使用postcss-px-to-viewport-8-plugin插件

1.安装

yarn add -D postcss-px-to-viewport-8-plugin
or
npm install -D postcss-px-to-viewport-8-plugin

2.使用
在根目录(和package.json文件同级)创建postcss.config.js文件

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-px-to-viewport-8-plugin': {
      viewportWidth: 375, // 设计稿宽度
      unitPrecision: 6, // 保留小数点几位
      unitToConvert: 'px', // 能转换的单位
      propList: ['*'], // propList: ['*','!font-size'], // 能转化为vw的属性列表,!font-size表示font-size后面的单位不会被转换
      viewportUnit: 'vw', // 希望使用的视口单位
      fontViewportUnit: 'vw', // 字体使用的视口单位
      // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
      selectorBlackList: ['keep-px]'],  // 下面配置表示类名中含有'keep-px'都不会被转换
    },
  },
};