rem

rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个px字号，则可以来算出元素的宽高。

利用rem这个单位去控制所有的盒子的大小，然后动态去改变html的font-size的值
rem的公式：设计图的大小/自己基于这个设计图设定font-size值(推荐40) = 这个屏幕的大小/这个屏幕对应的font-size值
反求rem：在设计图下面得到的元素宽高 / 基于这个设计图设定的 font-size值
建议：使用rem宜小不宜大，尽量使用固定+自适应，少用盒子与盒子之间浮动

// 千万注意：不要添加入口函数
// 同时引用的时候要放在最前面

// 获取 HTML 元素
let html = document.documentElement;
// 获取屏幕的宽度
let screenWidth = html.clientWidth;
let timer = null;
// 初始的设计图的大小

let uiWidth = 640;
// 初始的font-size的大小
let fonts = 40;
// 获取初始的比例
let rate = uiWidth / fonts;
// 根据当前的屏幕大小动态去计算这个屏幕所对应font-size值
html.style.fontSize = screenWidth / rate + 'px';

let getSize = () => {
  clearTimeout(timer);
  timer = setTimeout(() => {
    //重新获取屏幕的宽度
    screenWidth = html.clientWidth;
    //针对屏幕宽度做限定
    if (screenWidth <= 320) {
      html.style.fontSize = 320 / rate + 'px';
    } else if (screenWidth >= uiWidth) {
      html.style.fontSize = uiWidth / rate + 'px';
    } else {
      // 根据当前屏幕大小动态去计算这个屏幕锁对应font-size的值
      html.style.fontSize = screenWidth / rate + 'px';
    }
  }, 100);
}

getSize();
window.addEventListener("resize", getSize);