关于屏幕适配：postcss-pxtorem

postcss-pxtorem是px转rem的插件，是移动端比较好的适配方案

１．安装postcss-pxtorem npm i postcss-pxtorem --save

２.根目录下创建postcss.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.
    }
  }
}

3.utils文件夹下（没有就新建一个）,新建一个rem.js

(function init(screenRatioByDesign = 16 / 7) {
  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);
})();

4..main.js引入rem.js文件

// 屏幕适配
import "assets/utils/rem.js";