Verwenden Sie rem, um die Schriftgröße an den Bildschirm anzupassen

rem ist eine relative Einheit (root em, root em), die von CSS3 hinzugefügt wurde. Der Unterschied zwischen dieser Einheit und em besteht darin, dass bei Verwendung von rem zum Festlegen der Schriftgröße für ein Element immer noch eine relative Größe vorliegt, die relative Größe jedoch nur das HTML-Stammelement ist. Man kann sagen, dass diese Einheit die Vorteile der relativen Größe und der absoluten Größe kombiniert. Dadurch können alle Schriftgrößen proportional angepasst werden, indem nur das Stammelement geändert wird, und die Kettenreaktion der Schicht-für-Schicht-Zusammensetzung der Schriftgröße kann vermieden werden.

Fügen Sie den folgenden Code in die Eintragsdatei ein, um die Schriftgröße an die Bildschirmgröße anzupassen

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）