窗口大小改变字体变化

最新推荐文章于 2023-02-25 16:46:41 发布

程序员小乐leblog

最新推荐文章于 2023-02-25 16:46:41 发布

阅读量226

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_40050134/article/details/125507647

版权

	  * 根据基础字体大小 和 效果图宽度设置 根节点字体大小
      * @param baseFontSize  浏览器默认字体大小 [注]浏览器最小字体为12像素，所以该值必需大于等于12
      * @param baseWidth  设计稿的尺寸
      */
      function initFontSize(){
      // 获取当前屏幕宽度
      var clientWidth = document.documentElement.clientWidth || window.innerWidth;
      // 根据宽度计算根节点字体大小
      //初始化 字体16px , 设计稿宽1920px
      var size = Math.floor( clientWidth / 1920 * 16 );

      size = size > 12 ? size : 12;

      document.querySelector('html').style.fontSize = size + 'px';
      }
      initFontSize();
      // 窗口大小改变时设置根节点字体大小，通过字体大小来控制页面元素尺寸的缩放
      window.addEventListener('resize', initFontSize);