rem布局设置

2019年9月7日 98次阅读 来源: pengj

rem基本介绍

rem全称font size of the root element，是一种相关参考坐标，即在根结点设置基本的字体大小（一般是根html），其他节点的所有的字体大小都是相对于根结点（html）而已。

示例

随着屏幕的宽高的变化，动态设置html节点的fontSize属性. width属性根据设计图的尺寸做相应的调整。 通过如下的方式，可以直接通过将设计图上的px值除以100即为当前的设置的元素属性值。

window.addEventListener("resize", this.setFontSize);
function setFontSize() {
    var designedWidth = this.props.width;
    let actualWidth = Math.min(450, $(window).width());
    document.documentElement.style.fontSize = actualWidth * 100 / designedWidth + 'px';
}

其他

如果设计图的属性固定，不常变化，可以直接将如下代码设置在html中

(function (doc, win) {
      var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
          var clientWidth = docEl.clientWidth;
          if (!clientWidth) return;
          clientWidth = clientWidth>750?750:clientWidth;
          docEl.style.fontSize = Math.floor (100 * (clientWidth / 750)) + 'px';
        };

      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
    原文作者：pengj
    原文地址: https://segmentfault.com/a/1190000007830397
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞