使用 rem 实现移动端的自适应布局

先看一下网上对 rem 的介绍：rem 是CSS3新增的相对长度单位，是指相对于根元素html的font-size计算值的大小；

设计思路：可以看出 rem 是一个相对长度单位，而且是 “相对于根元素 html的 font-size计算值的大小”，例如：我们 设置一页面的 html 标签的 font-size 为 16px,如下：

html {
    font-size: 16px;
}

然后，我们给该页面内一 div 标签设置如下 css：

div {
    width: 2rem;
}

那么该div的实际宽度应该是：2 *  16px = 32px；基于这种特性，我们可以为不同宽度的设备屏幕为根节点设置不同 font-size，然后页面元素宽度根据视觉稿给出的计算出对应的 rem，便可实现宽度自适应。

项目初始，我们会拿到 视觉工程师提供的视觉稿，该视觉稿通常是根据某一固定机型（如 iphone6s）所设计，如下：

 

       我们知道，iphone6s 的屏幕宽度为 375px（这里的的 375 是指 设备独立像素），但通常视觉稿给出的宽度却是 750px,是实际宽度的2倍，这是因为 iphone6s 使用的是 retina 屏幕，dpr = 2（设备像素比 device pixel ratio ), 如果设计稿宽度定为 375px，会导致设计稿上图片在iphone6s上显示模糊，具体原因请参阅 dpr（设备像素比）与 移动端适配。

因此为了方便计算，我们可将 html 的 font-size 设置为 375px；但是并不是所有的手机屏幕宽度都一样，因而我们可以 用一段 js 代码去获取屏幕的宽度，并将 html 的 font-size 设置为该宽度：

window.onload = function() {
		setrem();
		window.addEventListener("resize",function(){
			setrem();				
		});
}

function setrem() {
		var el = document.getElementsByTagName("html")[0];
		el.style["fontSize"] = el.clientWidth + "px";
}

 

这样，我们就可以使用 rem 为 页面中的元素设置宽度了，例如视觉稿中有一 Button 宽度为 200 px; 那么转化为 rem 应该是 200px / 750px * 1rem = 0.26666667rem，对应css如下：

button {
    width：0.26666667rem;
}

为了方便，我们在 sass 中可以用函数帮我们转换，如下：

$design-doc-width:750px; //视觉稿采用宽度
@function px2rem($px:0px) {
    @return $px / $design-doc-width * 1rem;
}

button {
    width：px2rem(200px);
}

到此为止，我们就已经用 rem 实现了简单的自适应，当然实际项目中还有许多细节问题要处理，详细请参阅：使用 rem 实现移动端自适应布局应该注意哪些问题？

这是我在 csdn 发的第一篇文章，有什么错误遗漏之处，还请大家多多指正，谢谢！