1

rem在设置宽度和高度的时候,该怎么进行计算呢?
比如html{font-size:62.5%;}
那么font-size:2rem;与font-size:20px是一样的
但是width:20rem与width:200px是不一样的。
所以,当想用rem进行width与height进行设置时,该怎么计算呢?以谁为参照物呢?

Awbeci 2.1k
6月17日提问

查看全部 4 个回答

0

rem是以根元素<就是html标签>的font-size为参照物的。
一般你会看见以下js

(function (doc, win) {
  var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
      var clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
      if (clientWidth >= 750) {
        // 这里的750取决于设计稿的宽度
        docEl.style.fontSize = '100px';
      } else {
        docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
      }
    };

  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  recalc();
  // doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
``

推荐答案

0

已采纳

设值的问题可以看这个https://segmentfault.com/q/1010000002411895

为什么会出现计算
font-size 2rem = 20px
width 2rem = 24px

感觉是 chrome 限制最小字体 12px 导致的问题

推广链接