• 一、通用分辨率适配方案二
  • 1. 具体实现

一、通用分辨率适配方案二

• 原理：根据当前页面屏幕分辨率相对于基准分辨率的缩放比例 * 基准字体大小 = 页面根节点的字体大小

1. 具体实现

• 安装插件

  npm i postcss-px2rem px2rem-loader -S

• 新建 utils/rem.js

  // rem等比适配配置文件
  // 基准大小
  const baseSize = 100;
  // 设置 rem 函数
  function setRem() {
    // 当前页面屏幕分辨率相对于 1920宽的缩放比例，可根据自己需要修改
    const scale = document.documentElement.clientWidth / 1920;
    // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
    document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px';
  }
  // 初始化
  setRem();
  // 改变窗口大小时重新设置 rem
  window.onresize = function () {
    setRem();
  };

• 在 main.js 中引入适配文件

  import './utils/rem.js'

• 在 vue.config.js 中配置插件

  // 引入等比适配插件
  const px2rem = require('postcss-px2rem')
  
  // 配置基本大小
  const postcss = px2rem({
    // 基准大小 baseSize，需要和rem.js中相同
    remUnit: 100
  })
  
  // 使用等比适配插件
  module.exports = {
    lintOnSave: true,
    css: {
      loaderOptions: {
        postcss: {
          plugins: [
            postcss
          ]
        }
      }
    }
  }

• 注意事项

  • 最好不要设置高度、宽度，尽量去自适应。
  • 每个组件的 font-size 都需要进行设置，否则就是默认基准的 font-size
  • style里面的宽度大小无法转换成rem
  • UI组件自带的 width 尽量不要去使用，会变成 style 样式，导致没法进行转换成 rem