px转rem全局适配屏幕

实现方案

第一点：获得 rem 的基准值

1. 首先安装 @njleonzhang/postcss-px-to-rem 这个包

npm i @njleonzhang/postcss-px-to-rem -D

1. 在项目根目录新建.postcssrc.js配置文件

module.exports = {
  plugins: {
    autoprefixer: {},
    "@njleonzhang/postcss-px-to-rem": {
      unitToConvert: 'px', // (String) 要转换的单位，默认是 px。
      widthOfDesignLayout: 1920, // (Number) 设计布局的宽度。对于pc仪表盘，一般是 1920.
      unitPrecision: 3, // (Number) 允许 rem 单位增长到的十进制数字.
      selectorBlackList: ['.ignore', '.hairlines'], // (Array) 要忽略并保留为 px 的选择器.
      minPixelValue: 1, // (Number) 设置要替换的最小像素值.
      mediaQuery: false // (Boolean) 允许在媒体查询中转换 px.
    }
  }
}

1. 配置完成后，页面内的 px 就会被转换成 rem 了

第二点：动态的计算html根元素的font-size

1. 在工具函数文件中新建一个 rem.js 文件，用于动态计算 font-size

(function init(screenRatioByDesign = 16 / 9) {
  let docEle = document.documentElement
  function setHtmlFontSize() {
    var screenRatio = docEle.clientWidth / docEle.clientHeight;
    var fontSize = (
      screenRatio > screenRatioByDesign
        ? (screenRatioByDesign / screenRatio)
        : 1
    ) * docEle.clientWidth / 10;
    docEle.style.fontSize = fontSize.toFixed(3) + "px";
    console.log(docEle.style.fontSize);
  }
  setHtmlFontSize()
  window.addEventListener('resize', setHtmlFontSize)
})().在入口文件 main.js 中引入 rem.js 文件

import './utils/rem.js';