H5 mobile terminal adaptation font setting

foreword

The mobile page dynamically sets the root element to adapt to different screen sizes.

start

<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>  

According to the picture under ip6 given by the ui designer, all sizes can be adapted normally only by dividing by 10.