关于大屏适配方案

1.比例缩放 应用场景 固定比例大屏 2.vw+vh+rem 应用与动态比例大屏方案 3.npm install postcss-px-to-viewport -D px转 vw 解决固定比例老项目缩放问题导致js鼠标事件偏移的问题

在项目根目录创建 postcss.config.js文件： module.exports = { plugins: { 'postcss-px-to-viewport': { // 设计稿宽度（根据你的设计稿来设置） viewportWidth: 375,

      // 要转换的单位
      unitToConvert: 'px',

      // 转换后的单位
      viewportUnit: 'vw',

      // 转换的最小值，小于这个值不转换
      minPixelValue: 1,

      // 转换的精度，小数点后几位
      unitPrecision: 5,

      // 需要转换的 CSS 属性列表，* 表示所有属性
      propList: ['*'],

      // 不需要转换的 CSS 选择器
      selectorBlackList: [
        'ignore-',  // 类名中包含 'ignore-' 的
        '.ignore',  // 类名为 .ignore 的
        '.hairlines'  // 细线边框
      ],

      // 是否在媒体查询中转换 px
      mediaQuery: false,

      // 是否替换掉包含 vw 的规则，而不是添加备用的
      replace: true,

      // 忽略某些文件
      exclude: /node_modules/,

      // 是否添加根据 landscapeWidth 生成的媒体查询条件
      landscape: false,

      // 横屏时的宽度
      landscapeWidth: 568
    }
  }
}