自適應開發——rem

摘要：rem 是相對於 html 的 font-size，只須要肯定了 html 的 font-size 的 px 字號，就能夠計算出元素的寬高。

什麼是 rem

首先你們應該知道 em 單位，em 指的是相對於父元素的字體大小的單位，而 rem 指的是相對於 html 的字體大小的單位。例如：html 的 font-size 值爲 10px ，那麼 1rem 表明的就是 10px，2rem 表明的就是 20px。

目前主要的佈局方式

1.流式佈局  
流式佈局的方式，是將寬度設置成百分比，高度採用 px 固定高度，主要案例如：亞馬遜、攜程。雖然這種方式可讓各類屏幕都適配，可是現實的效果很是差，在大屏幕手機下頁面元素會被拉長，只有部分手機能夠較好的呈現設計圖效果。
2.固定寬度  
早期有些頁面寫成了固定寬度，超出的部分留白，這種方式的弊端在於大屏幕手機下頁面會顯得很是小，並且白邊也很差看，不符合如今人們的審美。
3.響應式佈局  
採用響應式配合媒體查詢的方法，能夠在不一樣屏幕尺寸下呈現出不一樣的頁面效果，的確是很不錯，可是缺點在於開發成本較大，至關於要開發多套頁面，只能在小項目上使用，若是是大型項目的話，感受是划不來的。
4.rem 等比例佈局  
rem 可以在不一樣的屏幕尺寸下顯示等比例的頁面，我認爲是既知足需求又省力的作法。

rem 的原理

說了這麼多，該說說 rem 的工做原理了。  
 

html{
   font-size: 10px;
}
div{
   width: 10rem;
   height: 5rem;
   background: skyblue;
   color: #000000;
   text-align: center;
   line-height: 5rem;
   font-size: 1.2rem;
}

效果以下圖：

此時 1rem = 10px。

接下來咱們改變 html 的 font-size 爲 20px。

效果以下圖：

在寬高的rem值沒有變的狀況下，咱們只改變了 html 的 font-size 值，就改變了元素的大小。

此時的 1rem = 20px。

由此咱們得出方法，經過媒體查詢，在不一樣屏幕尺寸狀況下，設置不一樣的 html 的 font-size 值就能夠調節rem大小。可是屏幕尺寸這麼多，咱們不能一個一個的設置吧，因而想到了用 js 來設置。

//designWidth:設計稿的實際寬度值，須要根據實際設置
//maxWidth:製做稿的最大寬度值，須要根據實際設置
//這段js的最後面有兩個參數記得要設置，一個爲設計稿實際寬度，一個爲製做稿最大寬度，例如設計稿爲750，最大寬度爲750，則爲(750,750)
;(function(designWidth, maxWidth) {
	var doc = document,
	win = window,
	docEl = doc.documentElement,
	remStyle = document.createElement("style"),
	tid;

	function refreshRem() {
		var width = docEl.getBoundingClientRect().width;
		maxWidth = maxWidth || 540;
		width>maxWidth && (width=maxWidth);
		var rem = width * 100 / designWidth;
		remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
	}

	if (docEl.firstElementChild) {
		docEl.firstElementChild.appendChild(remStyle);
	} else {
		var wrap = doc.createElement("div");
		wrap.appendChild(remStyle);
		doc.write(wrap.innerHTML);
		wrap = null;
	}
	//要等 wiewport 設置好後才能執行 refreshRem，否則 refreshRem 會執行2次；
	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);
	}
})(750, 750);

接下來就能夠開心的寫代碼了。