想用rem给width与height进行赋值时,该怎么计算呢?以谁为参照物呢?

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

阅读 871
评论
    4 个回答

    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);
    ``