• rem适配方案之后,vw适配方案也是一个不错的选择
  • 1vw单位为屏幕宽度的百分之一,使用插件 postcss-px-to-viewport 可以实现把页面中的 px 转化成 vw单位
  • 创建 vue.config.js 文件
  • 配置创建参数(viewportWidth为UI稿件的宽度,样式采用 跟UI稿件一样的尺寸即可,单位为px)
    css: {
      loaderOptions: {
        postcss: {
          plugins: [
            require("postcss-px-to-viewport")({
              unitToConvert: "px",
              viewportWidth: 1125,
              unitPrecision: 3,
              propList: [
                "*"
              ],
              viewportUnit: "vw",
              fontViewportUnit: "vw",
              selectorBlackList: [],
              minPixelValue: 1,
              mediaQuery: false,
              replace: true,
              exclude: /(\/|\\)(node_modules)(\/|\\)/,
            })
          ]
        }
      }
    }