乐趣区

关于javascript:简单聊下rem与em的区别并如何做移动端适配

jiezi

说一下 rem 与 em 有什么区别

rem 是基于 html 元素的字体大小来决定，而 em 则依据应用它的元素的大小决定, 个别被称为绝对长度单位, 是依据它父元素的字体大小来计算的，个别默认状况下：16px = 1em

如果父元素font-size:16px, 子元素margin:0.8em。那么失去的大小就是:0.8 * 16 =12.8。

当所有单位都采纳 em 时，咱们只须要扭转 body 的font-size，那么其余子元素宽度就能动态变化了，显然不便很多

em 和 rem 单位之间的区别是浏览器依据谁来转化成 px 值

rem是 css3 新增的一个绝对长度单位，它的呈现是为了解决 em 的毛病，em能够说是绝对于父级元素的字体大小，当父级元素字体大小扭转时，又得从新计算。

rem 呈现就能够解决这样的问题，rem只绝对于根目录，即 HTML 元素。有了rem 这个单位，咱们只须要调整根元素 html 的font-size就能达到所有元素的动静适配了

挪动端 - 以一个固定尺寸 (750px) 为规范 - 将 px 转化为 rem

(function(win, lib) {
  var doc = win.document;
  var docEl = doc.documentElement;
  var devicePixelRatio = win.devicePixelRatio;
  var dpr = 1;
  var scale = 1;

  // 设置 vierPort
  function setViewport() {
    dpr = 1;
    win.devicePixelRatioValue = dpr;
    scale = 1 / dpr;
    var metaEl = doc.createElement('meta');
    metaEl.setAttribute('name', 'viewport');
    metaEl.setAttribute(
      'content',
      'initial-scale=' +
        scale +
        ', maximum-scale=' +
        scale +
        ', minimum-scale=' +
        scale +
        ', user-scalable=no'
    );
    if (docEl.firstElementChild) {docEl.firstElementChild.appendChild(metaEl);
    } else {var wrap = doc.createElement('div');
      wrap.appendChild(metaEl);
      doc.write(wrap.innerHTML);
    }
  }

  setViewport();
  var newBase = 100; // 把页面划分为 100 等分

  // 设置 Rem
  function setRem() {
    var visualView = Math.min(docEl.getBoundingClientRect().width,
      lib.maxWidth
    );
    newBase = (100 * visualView) / lib.desinWidth;
    docEl.style.fontSize = newBase + 'px';
  }

  var tid;
  lib.desinWidth = 640;
  lib.baseFont = 18;
  lib.maxWidth = 540;
  lib.init = function() {
    win.addEventListener(
      'resize',
      function() {clearTimeout(tid);
        tid = setTimeout(setRem, 300);
      },
      false
    );
    win.addEventListener(
      'pageshow',
      function(e) {if (e.persisted) {clearTimeout(tid);
          tid = setTimeout(setRem, 300);
        }
      },
      false
    );
    if (doc.readyState === 'complete') {doc.body.style.fontSize = lib.baseFont * dpr + 'px';} else {
      doc.addEventListener(
        'DOMContentLoaded',
        function(e) {doc.body.style.fontSize = lib.baseFont * dpr + 'px';},
        false
      );
    }
    setRem();
    docEl.setAttribute('data-dpr', dpr);
  };
})(window, window['adaptive'] || (window['adaptive'] = {}));
window['adaptive'].desinWidth = 750;
window['adaptive'].baseFont = 12;
window['adaptive'].maxWidth = 540;
window['adaptive'].init();

以上代码以设计稿 750px 的为规范, 如果是非 750px, 在理论页面中, 将它转化为 750, 而后再做转化

100px  = 1rem;
750px = 7.5rem;

将这段 js 代码命名为一个 mobile-adaption.js 引入到页面中, 就能够欢快的应用了, 将 px 转化为rem, 实现自适应布局

在不同的设施当中保持一致, 每个公司对于挪动端都有本人的一套规范, 也有用 淘宝 flexible.js做适配的

应用可参考手淘适配

  • 手把手教你用 vuepress 搭建网站
  • Js 面试 - 口试真题 - 请说一下 Js 中的事件循环机制
退出移动版