一、前言
我們h5項目終端適配采用的是淘寶那套《Flexible實現手淘H5頁面的終端適配》方案。主要原理是rem布局。最近和別人談彈性布局原理，發現雖然已經使用了那套方案很久，但是自己對rem的理解很含糊， 包括vw、vh等。所以打算寫博客總結一下，以加深理解。
二、幾個概念
這里就不講那些，物理像素、設備像素比了，可以自己查閱。要去理解rem/em/vm/vh等，首先要直觀的去理解他們到底是什么？理解好了，后面就好辦了。其實這幾個都是css單位，就像我們常用的px一樣，只不過他們都是相對單位。我平時使用的百分比單位如：width:100%;就是相對單位。
2.1、em
em作為font-size的單位時，其代表父元素的字體大小，em作為其他屬性單位時，代表自身字體大小——MDN
比如父元素font-size:12px;
自身元素如果寫成：font-sise:2em;則自身元素用px表示就是24px（相對父元素字體大小）;
但是自身元素設置：width:2rem,那么自身元素用px表示就是48px（相對自身字體大小）；
2.2、rem
rem作用於非根元素時，相對於根元素字體大小；rem作用於根元素字體大小時，相對於其出初始字體大小——MDN
比如根元素（html）設置font-size=12px; 非根元素設置width:2rem;則換成px表示就是24px；
如果根元素設置成font-size=1rem;則根元素換成px就是相對於初始字體大小，一般是12px；
2.3、vm/vh
vw ： 視口寬度的 1/100；vh ：視口高度的 1/100 —— MDN
在pc端，視口寬高就是瀏覽器得寬高；
在移動端，這個還不太一樣，不過一般設置：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
代碼以顯示網頁的屏幕寬度定義了視窗寬度。網頁的比例和最大比例被設置為100%。
三、剖析rem布局原理
其實好好理解上面的概念，rem的原理也就很簡單了。
假設我們將屏幕平局分為10份，每一份寬度用一個a表示，即a=屏幕寬度/10;那么：
div{width: 5a} /* 屏幕寬度的50% */
但是css中沒有a這個單位啊？那怎么辦呢？對，css不是有相對單位rem么？我們全可以實現借助rem代替上面的a。如：
html {font-size: 12px}
div {width: 2rem} /* 24px*/
html {font-size: 16px}
div {width: 2rem} /* 32px*/
那么問題來了？怎么讓html元素字體大小恆等於屏幕的1/10呢？如ipone6寬是375px,font-size:37.5px;
html {fons-size: width / 10}
div {width: 5rem} /* 5rem = 5a = 屏幕寬度的50% */
我們用js很容易動態的設置html的font-size恆等屏幕的1/10;我們可以在頁面dom ready、resize和屏幕旋轉中設置：
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
如何把設計稿的像素單位換成以rem為單位呢？可以用一個比例來計算：如設計稿寬度為750px，某個元素量得75px，那么：
75px/750px = 計算所得rem/10rem,所以計算所得rem=75px;所以我們在樣式中寫width:1rem；實際寬度是75px；同理，如果設計稿總寬度是640px,則1rem=64px。
預處理函數可以簡化：
$ue-width: 750; /* 設計稿圖的寬度 */
@function px2rem($px) {
@return #{$px/$ue-width*10}rem;
}
div {
width: px2rem(100);/*編譯后： p{width:1.5625rem}*/
}
四、rem萬能嗎？
rem是一種彈性布局，它強調等比縮放，100%還原。它和響應式布局不一樣，響應式布局強調不同屏幕要有不同的顯示，比如媒體查詢。
字體並不合適使用rem, 字體的大小和字體寬度，並不成線性關系，所以字體大小不能使用rem；由於設置了根元素字體的大小，會影響所有沒有設置字體大小的元素，因為字體大小是會繼承的，難道要每個元素都顯示設置字體大小？
我們可以在body上做字體修正，比如把body字體大小設置為16px，但如果用戶自己設置了更大的字體，此時用戶的設置將失效，比如合理的方式是，將其設置為用戶的默認字體大小:
html {fons-size: width / 10}
body {font-size: 16px}
那字體咋整？我們可以用媒體查詢和em來實現：
@media screen and (min-width: 320px) {
body {font-size: 16px}
}
@media screen and (min-width: 481px) and (max-width:640px) {
body {font-size: 18px}
}
@media screen and (min-width: 641px) {
body {font-size: 20px}
}
div {font-size: 1.2em}
在制作H5的頁面中，rem並不適合用到段落文本上。所以在Flexible整個適配方案中，考慮文本還是使用px作為單位。只不過使用[data-dpr]屬性來區分不同dpr下的文本字號大小。
.selector {
width: 2rem;
border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
font-size: 14px;
}
[data-dpr="2"] .selector {
font-size: 28px;
}
[data-dpr="3"] .selector {
font-size: 42px;
}
當然你也可以給非根元素設置合適的字體。
五、rem布局方案
從上可以看出最好的彈性布局方案就是rem+js的方案，《Flexible實現手淘H5頁面的終端適配》就是采用rem+js實現的。flexible主要做了幾點。
- 動態改寫
<meta>標簽 - 給
<html>元素添加data-dpr屬性，並且動態改寫data-dpr的值。 - 給
<html>元素添加font-size屬性，並且動態改寫font-size的值
https://github.com/amfe/lib-flexible：
;(function(win, lib) {
var doc = win.document;
var docEl = doc.documentElement;
var metaEl = doc.querySelector('meta[name="viewport"]');
var flexibleEl = doc.querySelector('meta[name="flexible"]');
var dpr = 0;
var scale = 0;
var tid;
var flexible = lib.flexible || (lib.flexible = {});
if (metaEl) {
console.warn('將根據已有的meta標簽來設置縮放比例');
var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
if (match) {
scale = parseFloat(match[1]);
dpr = parseInt(1 / scale);
}
} else if (flexibleEl) {
var content = flexibleEl.getAttribute('content');
if (content) {
var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
if (initialDpr) {
dpr = parseFloat(initialDpr[1]);
scale = parseFloat((1 / dpr).toFixed(2));
}
if (maximumDpr) {
dpr = parseFloat(maximumDpr[1]);
scale = parseFloat((1 / dpr).toFixed(2));
}
}
}
if (!dpr && !scale) {
var isAndroid = win.navigator.appVersion.match(/android/gi);
var isIPhone = win.navigator.appVersion.match(/iphone/gi);
var devicePixelRatio = win.devicePixelRatio;
if (isIPhone) {
// iOS下，對於2和3的屏，用2倍的方案，其余的用1倍方案
if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
dpr = 3;
} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
dpr = 2;
} else {
dpr = 1;
}
} else {
// 其他設備下，仍舊使用1倍的方案
dpr = 1;
}
scale = 1 / dpr;
}
docEl.setAttribute('data-dpr', dpr);
if (!metaEl) {
metaEl = doc.createElement('meta');
metaEl.setAttribute('name', 'viewport');
metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
if (docEl.firstElementChild) {
docEl.firstElementChild.appendChild(metaEl);
} else {
var wrap = doc.createElement('div');
wrap.appendChild(metaEl);
doc.write(wrap.innerHTML);
}
}
function refreshRem(){
var width = docEl.getBoundingClientRect().width;
if (width / dpr > 540) {
width = 540 * dpr;
}
var rem = width / 10;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
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 = 12 * dpr + 'px';
} else {
doc.addEventListener('DOMContentLoaded', function(e) {
doc.body.style.fontSize = 12 * dpr + 'px';
}, false);
}
refreshRem();
flexible.dpr = win.dpr = dpr;
flexible.refreshRem = refreshRem;
flexible.rem2px = function(d) {
var val = parseFloat(d) * this.rem;
if (typeof d === 'string' && d.match(/rem$/)) {
val += 'px';
}
return val;
}
flexible.px2rem = function(d) {
var val = parseFloat(d) / this.rem;
if (typeof d === 'string' && d.match(/px$/)) {
val += 'rem';
}
return val;
}
})(window, window['lib'] || (window['lib'] = {}));
六、em可以用來做彈性布局嗎？
上面知道，一旦某個節點的字體大小發生變化，其他節點也隨之變化，所以不合適，但是用來處理字體還是絕妙的。
七、vw/wh用來做彈性布局怎么樣？
根據上面說，vw —— 視口寬度的 1/100；vh —— 視口高度的 1/100；感覺已經不用多說了。
/* rem方案 */
html {font-size: width / 10}
p {width: 1.5625rem}
/* vw方案 */
p {width: 15.625vw}
如果rem方案中使用設置font-size=width/100就和vm意思一樣， 但是比如font-size:640px/100;瀏覽器不會識別6.4px這么小的字體的。
如果不考慮兼容性問題，可以大膽使用vw/vm做彈性的布局。
八、網易考拉觸屏版的js+rem的彈性布局方式
其實它可以在body設置一個默認的字體大小的。