rem自適應布局的回顧總結

使用rem實現自適應布局，應該算是當前移動前端的一大趨勢，有些人對此還有點迷惑，搞不懂rem是如何實現自適應布局，如何根據設計稿來調整rem的值？rem布局如何用雪碧背景圖片？rem一定要加載JS嗎？rem的根html font-size設置為多少合適？看看這篇文章，也許能幫到你。

這些問題整理來自之前發表過的文章，細心的讀者也可以自己翻翻之前的內容找到答案，本文統一給個回復，如果對你有用，還請點個贊，謝謝!

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的方式來實現，但這些在小項目中明顯是有點不實際。我通常使用下面兩種方式。

1. 第一種將背景圖片切成一個，然后換算成base64.的方式，或者使用sass的方式轉換，不過有弊端就是樣式文件會增大，看個人衡量。
2. 第二種則是通過背景圖片的百分比精准定位，詳情見這篇文章：CSS3背景圖片百分比及應用。
3. 或者對於精准度不太高，其實使用rem定位也可以，就是要把相鄰圖片隔開些。

本文后面將繼續更新關於rem實現自適應的相關問題，如果你有問題，還請留言給我。

原文鏈接： rem自適應布局的回顧總結 版權所有，轉載時請注明出處，違者必究。
注明出處格式：前端開發博客 ( http://caibaojian.com/rem-responsive-2.html)