这是计算根元素font-size的代码,请教详解

  wh = document.documentElement.clientHeight;
  ww = document.documentElement.clientWidth;
  var scale = ww / wh;
  var scaleX = ww / 750;
  var scaleY = wh / 1335;
  if (ww < 750) {
      if (scaleX * 30 <= 12) {
          document.getElementsByTagName("html")[0].style.fontSize = 12 + "px";
      } else {
          document.getElementsByTagName("html")[0].style.fontSize = scaleX * 30 + "px";           
      }
  }
阅读 2.5k
2 个回答
  wh = document.documentElement.clientHeight; //窗口高度
  ww = document.documentElement.clientWidth; //窗口宽度
  var scale = ww / wh; //长宽比
  var scaleX = ww / 750; //宽度与750的比例
  var scaleY = wh / 1335; //高度与1335的比例
  if (ww < 750) { //如果宽度小于750
      if (scaleX * 30 <= 12) { //假如高度与750的比例*30 < 12,反推得高度 <= 300时,字体保持12px
          document.getElementsByTagName("html")[0].style.fontSize = 12 + "px";
      } else { //否则字体大小按高度与750的比例*30 
          document.getElementsByTagName("html")[0].style.fontSize = scaleX * 30 + "px";           
      }
  }

根据浏览器宽度改变字体大小,以750的标准对应30的字体大小(rem布局)

1.在浏览器小于750的时候生效(可能取决于设计图只有750宽)
2.根据实际宽与标准宽比例,获取当前宽度下的字体大小
3.如果当前宽度下的字体大小小于12则取12号字体(这里可能是考虑到部分浏览器有最小字号的限制)
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题