Skip to content

Latest commit

 

History

History
29 lines (21 loc) · 1.01 KB

0311.md

File metadata and controls

29 lines (21 loc) · 1.01 KB

em,rem以及移动端适配如何适配

rem 相对根节点html的字体大小来计算

em 基准点为父节点字体的大小,如果自身定义了font-size按自身来计算

  • 浏览器默认字体大小为16px, 可以声明全局的 body的 font-size: 62.5%; 因为默认100%为16px, 62.5%即为10px, 这里1rem = 10px,
  • 如果动态设置页面字体大小, 当前页面字体大小 = 当前页面宽度 / 750 * 100;
(function (window) {
    var dpr = window.devicePixelRatio || 1,
      width = 750,
      docEle = window.document.documentElement;

    var resizeCall = (function () {
      var clientWidth = docEle.clientWidth;
      // parseInt(string, radix) radix代表进制
      docEle.style.fontSize = 100 * (clientWidth / parseInt(width, 10)) + 'px';
      return arguments.callee;
    })();

    dpr = dpr >= 3 ? 3 : dpr;
    docEle.setAttribute('data-dpr', dpr);

    window.addEventListener('resize', resizeCall, false);
  })(this);