h5自适应布局

首先贴出js原生自适应布局的代码：

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

      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener('DOMContentLoaded', recalc, false);
         })(document, window);
    </script>

这是rem布局的核心代码。

什么是rem？
rem是个低调的css单位，手淘在移动端的布局是基于rem处理的，当然还要基于viewport的处理，这里暂且不表。rem和em单位一样，都是一个相对单位,不同的是em是相对于元素的父元素的font-size进行计算,rem是相对于根元素html的font-size进行计算,这样一来rem就绕开了复杂的层级关系，实现了类似于em单位的功能。默认情况下浏览器给的字体大小是16px，按照转化关系 16px = 1rem。
rem布局非常简单，其基本原理就是根据不同的分辨率,动态的修正根字体的大小,让所有的用rem单位的子元素跟着一起缩放,从而达到自适应的效果。

这段代码的意思不难理解，获取页面的宽度，然后换算出当前页面的根字体大小。

当然，看到这里可能有很多童鞋有些不理解了，为什么设置375px，为什么设置根字体是100px？

首先说下设置为375px的原因。大家知道，iphone5分辨率为6401136，iphone6的分辨率是7501334，iphone6 Plus的分辨率是1080*1920，需要注意的是，我这里说的分辨率是物理分辨率，而我们项目里使用的是css的逻辑像素，简单理解起来就是物理像素的一半就是逻辑像素，由此可见我这里设置的尺寸标准是iphone6（750/2=375）的。

那问题又来了，为什么设置的是iphone6 的，而不是其他尺寸的？

是这样的，我首先要说明的是，这个375px不是必须的，是可以变化的。我在这里设置成375的原因有两方面，第一是因为我们设计师出的ui图尺寸规格是iphone6 为基准的，第二是设置在375这个标准上，方便向上向下缩放时，展示效果最佳。总结来说，根据你所在公司的具体情况灵活设置。

再有根字体设置成100px的原因。上面在解释rem的时候我有提到，如果根字体16px，那么1rem=16px，那50px又是多少rem呢，这就要去换算了，显然这样会很麻烦。如果根字体是100px，50px就是0.5rem，这样就省去了换算的麻烦。
因为每个页面都要调用这段js代码，所以将这段代码专门封装在一个js里面，方便调用。