基于rem的响应式布局

发表于   |   分类于

rem的布局新见解

其实，在写这篇博客之前，我建议大家可以参看这篇文章从网易与淘宝的font-size思考前端设计稿与工作流，我在仔细消化这篇文章后做了一个自己的看法和理解，欢迎交流。

像素单位的选择

em的没落

em的计算与继承：em是基于父元素而来计算的，比如div的parent节点font-size为1.2em，如果我们此时再对div做一个font-size的设置为1.2em，如果1em=12px，那么此时的div font-size为14.4px。

rem的受宠

恰恰相反，rem确实移动开发的最佳选择，因为rem的计算是基于html节点来换算px的。默认1rem = 16px。

网易的移动端设计方法

如果仔细查看网易移动端新闻网页的查看，我们会清晰的发现html节点上有个很明显的标志就是style对font-size的设置。那么我们必须明白的就是这个值是怎么计算出来的。首先，我们必须根据设计稿来。当设计师标注好相关的字体、长度和宽度后，我们先要看psd设计图的大小。比如：我们的设计稿宽为1080px的话，那我们选个100px(好计算)，那么我们的视口宽度就是1080/100=10.8rem，也就是说100px就是1.08rem。当我们设计对应的宽高的时候就可以计算出相应的rem值。

js动态设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
(function(win, doc, dw) {
	var docEl = doc.documentElement,
			dw = dw || 640,
			resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
			recalc = function() {
				var docElWidth = docEl.clientWidth;
				(docElWidth > 640) && (docElWidth = 640);
				if (!docElWidth) return;
				docEl.style.fontSize = docElWidth / (640 / 100) + 'px';  //基于640px设计稿
			};
	if (!doc.addEventListener) return;
	win.addEventListener(resizeEvt, recalc, false);
   doc.addEventListener('DOMContentLoaded', recalc, false);
})(window, document, 640);

这样就可以很好的按设计稿的尺寸来设置相应的宽高了，但是不要对字体用rem单位，还是要用相应的媒介查询来设置字体。千万要在html做视口设置:

1
<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">