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

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

阅读 497
评论 2019-06-17 提问
    4 个回答
    ssruoyan
    • 1.4k
    评论 赞赏 2019-06-17

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

      评论 赞赏 2019-06-17

        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);
        ``
        
        评论 赞赏 2019-06-17

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

          评论 赞赏 2019-06-18
            撰写回答

            登录后参与交流、获取后续更新提醒