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

Question

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

Answer 1

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

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

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

Answer 2

移动端：建议直接vw，rem用起来太别扭了

Answer 3

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

Answer 4

rem以html(根元素)的font-size为参照.
一般来说可以通过媒体查询@media screen and (min-width: px) and (max-width: px) and (orientation: portrait) { font-size: *px }来更改在不同屏幕下html的font-size,让使用了rem的元素发生改变,从而达到适配的效果.