Saber 酱的抱枕

更新：两年过去了，现在推荐使用 vw + rem 自适应布局。

我们页面布局中，可以通过动态设置rem并使用rem单位来设置宽高，来使得页面元素的尺寸可以随设备宽度而变化，这样就能保持布局的一致性。

使用JavaScript动态设置rem的代码如下：

(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 / 640) + 'px';
	  };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

公式是这样的：

100 * ( 浏览器页面宽度 / 设计稿宽度 )

第一部分：100是什么

这个100其实是我们使用的rem基础值，等于设置html标签的font-size=100px，这样，1rem也就是100px。

当1rem为100px时，页面上所有元素设置宽高大小时都除以100，就得出了该元素的rem值。比如设计稿上300px宽的元素，用rem设置就是width=3rem。

1rem并不是非要设置为100px，我们也可以设置成别的，比如设置1rem=50px，那么300px的元素是6rem。我们一般取1rem=100px是为了方便计算。如果实际项目中计算页面元素的rem值时不是按1rem=100px来算的，则需要修改公式里的100为实际使用的1rem值。

第二部分：浏览器页面宽度 / 设计稿宽度 是什么

这个可以理解为页面在设备上的缩放比例。比如iphone 6 plus的设备宽度是414px，我们的设计稿是640px。

414/640=0.646875，得出我们的页面在iphone 6 plus上应该显示为设计稿大小的0.646875倍。

最后我们把rem的基础值与页面缩放比例相乘，得出实际使用的rem基础值。rem的基础值变了，页面上所有元素的宽高、大小也会随之改变，这样就达到了页面自适应的效果。
Read More →

动态设置rem使页面自适应缩放