使用rem，使字体大小自适应屏幕

rem是CSS3新增的一个相对单位（root em，根em）。这个单位与em区别在于使用rem为元素设 定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

将以下代码放在入口文件，即可使字体大小自适应屏幕大小

function resize() {
    
    
  let doc = document.documentElement   //返回文档的根节点
  let width = doc.clientWidth  //获取浏览器窗口文档显示区域的宽度，不包括滚动条
  let ratio = width / 375  //将屏幕分为375份（当屏幕为375px时，ratio=1px）
  let fontSize = 10 * ratio //乘10，（当屏幕为375px时，fontSize=10px）
  if (fontSize > 20) fontSize = 20  //当屏幕为大于等于750px时，fontSize均等于20px
  doc.style.fontSize = fontSize + 'px' //加上单位
}
// 监听resize事件，调整窗口大小，感受rem的作用，这里只考虑竖屏的情况
window.onresize = resize   //window.onresize监听div和屏幕的改变
resize() //调用函数修改fontSize的值（1rem=fontSize）