自动调节html的font-size配合rem实现等比例缩放

FA_A

于 2018-10-22 17:16:37 发布

阅读量4.2k

点赞数

分类专栏：自适应

本文链接：https://blog.youkuaiyun.com/weixin_42950052/article/details/83275768

版权

自适应专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种基于屏幕宽度自适应调整字体大小的JavaScript实现方案，适用于响应式网页设计，确保不同设备上的一致阅读体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script type="text/javascript">
    var __rootrem;
    (function () {
      var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';

      function setFont() {
        var clientWidth = (document.documentElement || document.body.parentNode).clientWidth;
        if (clientWidth > 769) {
          clientWidth = 750;
        }

        // 375尺寸的比例，换算成@1x设计稿后1px=0.01rem
        __rootrem = Math.floor(clientWidth * 100 / 750);
        (document.documentElement || document.body.parentNode).style.fontSize = __rootrem + "px";
      }
      setFont();

      if (!window.addEventListener) return;
      window.addEventListener(resizeEvt, function () {
        setFont();
      });
    })();
  </script>