【转】rem自适应布局

rem自适应原理

rem是根据html的font-size大小来变化，正是基于这个出发，我们可以在每一个设备下根据设备的宽度设置对应的html字号，从而实现了自适应布局。更多介绍请看这篇文章：rem是如何实现自适应布局的。

rem的值

目前有两种，一种是根据js来调整html的字号，另一种则是通过媒体查询来调整字号。

使用js

;(function(designWidth, maxWidth) {

	var doc = document,

		win = window;

	var docEl = doc.documentElement;

	var tid;

	var rootItem,rootStyle;

	function refreshRem() {

		var width = docEl.getBoundingClientRect().width;

		if (!maxWidth) {

			maxWidth = 540;

		};

		if (width > maxWidth) {

			width = maxWidth;

		}

		//与淘宝做法不同，直接采用简单的rem换算方法1rem=100px

		var rem = width * 100 / designWidth;

		//兼容UC开始

		rootStyle="html{font-size:"+rem+'px !important}';

		rootItem = document.getElementById('rootsize') || document.createElement("style");

		if(!document.getElementById('rootsize')){

		document.getElementsByTagName("head")[0].appendChild(rootItem);

		rootItem.id='rootsize';

		}

		if(rootItem.styleSheet){

		rootItem.styleSheet.disabled||(rootItem.styleSheet.cssText=rootStyle)

		}else{

		try{rootItem.innerHTML=rootStyle}catch(f){rootItem.innerText=rootStyle}

		}

		//兼容UC结束

		docEl.style.fontSize = rem + "px";

	};

	refreshRem();

	win.addEventListener("resize", function() {

		clearTimeout(tid); //防止执行两次

		tid = setTimeout(refreshRem, 300);

	}, false);

	win.addEventListener("pageshow", function(e) {

		if (e.persisted) { // 浏览器后退的时候重新计算

			clearTimeout(tid);

			tid = setTimeout(refreshRem, 300);

		}

	}, false);

	if (doc.readyState === "complete") {

		doc.body.style.fontSize = "16px";

	} else {

		doc.addEventListener("DOMContentLoaded", function(e) {

			doc.body.style.fontSize = "16px";

		}, false);

	}

})(640, 640);

你可以把上面的代码内嵌到html的head中，换算比例是1rem=100px，为了计算方便，你可以在我的一个github项目下载完整的结构和一个压缩的js。

项目主页

上面代码中的关键代码是：

var width = docEl.getBoundingClientRect().width;

var rem = width * 100 / designWidth;

docEl.style.fontSize = rem + "px";

第一行代码，获取移动设备的宽度，第二行，rem的值等于(设备的宽度)x100/(设计稿宽度)，第三行，设置html的字号为第二行的值。
有些人可能会注意到第二行代码跟淘宝的那个有所区别，区别就在于rem的换算比例，这里你可以任意改动为实际中的情况，比如有人喜欢用20px，那你可以将上面的100改为20，换算比例则改为1rem=20px。关于上面这段代码可以看之前的文章：Rem精简版实现自适应。
还有的人要用回淘宝的那个，那么第二行代码可以变为var rem = width/10; 换算比例则改为根据设计稿的宽度来调整了，假设我们的设计稿宽是640的，则html的字体大小则被设为64px.则相当于1rem=64px。具体实现请看之前的文章：rem自适应布局-flexible。

使用媒体查询

说到底，上面的js代码不就是根据不同的设备调整对应的html字号嘛，那么我们根据实际的设备，来加上相应的字号不就行了吗？

我们知道html的默认字号是16px，则对应的设备下可以通过设置对应的font-size使其有一致的缩放比例。

html {

font-size: 62.5%

}

@media only screen and (min-width: 481px) {

html {

font-size:94%!important

}

}

@media only screen and (min-width: 561px) {

html {

font-size:109%!important

}

}

@media only screen and (min-width: 641px) {

html {

font-size:125%!important

}

body {

max-width: 640px

}

}

上面的代码则是通过1rem=20px来换算的，从哪里看出来呢？从最大的一个值640出发，假如你的设计稿是750的话，那你还要设计更多的媒体查询，换算比例保持一致就可以了。那如果我想要换算比例为1rem=100呢？按照上面的规则，最大的值为：html:font- size:100/16*100%，其它的则按比例，比如480px，则为480/640*(100/16*100%)。

使用雪碧图

国内的很多人都提倡使用字体图标或者用SVG的方式来实现，但这些在小项目中明显是有点不实际。我通常使用下面两种方式。

第一种将背景图片切成一个，然后换算成base64.的方式，或者使用sass的方式转换，不过有弊端就是样式文件会增大，看个人衡量。
第二种则是通过背景图片的百分比精准定位，详情见这篇文章：CSS3背景图片百分比及应用。
或者对于精准度不太高，其实使用rem定位也可以，就是要把相邻图片隔开些。

本文后面将继续更新关于rem实现自适应的相关问题，如果你有问题，还请留言给我。