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 で割るだけで適応できます。