h5手机端适配字体设置

前言

手机端页面动态设置根元素，适配不同屏幕大小。

开始

<script>
    //rem为html的字体大小 通过改变html的字体大小达到适配的效果
    remChange();
    //监听屏幕改变resize事件 触发remChange方法
    window.addEventListener("resize", remChange)
    function remChange() {
      const html = document.querySelector("html");
      const width = html.getBoundingClientRect().width; //拿到适配器的宽度值
      //若屏幕宽为375px则1rem = 100px 若不是则按比例增大或减小
      html.style.fontSize = width / 7.5 + 'px';
    }

  </script>  

根据ui设计师给的在ip6下的图，各种尺寸只需除以10，就可以正常进行适配。