H5页面自适应rem的配置

1. 参考网站：https://www.jb51.net/article/167245.htm

2.设置根节点的font-size

function setRootFontSize() {
  // let rem, rootWidth;
  const rootHtml = document.documentElement;
  //限制展现页面的最小宽度
  const rootWidth = rootHtml.clientWidth < 1366 ? 1366 : rootHtml.clientWidth;
// 19.2 = 设计图尺寸宽 / 100( 设计图的rem = 100 )
  const rem = rootWidth / 25;
// 动态写入样式
  console.log(`rootWidth:${rootWidth},rem:${rem}px`);
  rootHtml.style.fontSize = `${rem}px`;
}

3.下载对应的包，更改vue.config.js

lintOnSave: true,
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-plugin-px2rem')({
            rootValue:75,      // 新版本的是这个值
            mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
            minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0
          }),
        ]
      }
    }
  },

//参考方法
// 基准大小
const baseSize = 16
// 设置 rem 函数
function setRem() {
  // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
  const scale = document.documentElement.clientWidth / 1125
  // 设置页面根节点字体大小
  document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function() {
  setRem()
}