前言
在自適應(yīng)布局或者移動端網(wǎng)頁開發(fā)時藻三，我們經(jīng)常會用到em和rem兩個長度單位。接下來我們討論一下這兩個單位和px之間的區(qū)別跪者，以及他們的使用場景等棵帽。
區(qū)別
px
px，像素(計算機屏幕上的一個點)渣玲。（引自w3school-css單位）
像素（Pixels）逗概，相對長度單位，它是相對于顯示器屏幕分辨率而言的忘衍，它兼容性好而且精確逾苫，但是這種方法當(dāng)用戶在縮放瀏覽器或者需要兼容不同移動設(shè)備時，我們的頁面布局可能會被打破枚钓。?
em
em為了解決上述問題而進化產(chǎn)生铅搓，也是相對長度單位，根據(jù)使用它的元素的大小決定（有人誤以為是根據(jù)父元素搀捷，那是因為使用它的元素繼承了父類的屬性星掰，根據(jù)W3C標(biāo)準(zhǔn)可知 ，它們是基于當(dāng)前對象元素的字體大心壑邸）氢烘，它可以自動適應(yīng)用戶所使用的字體。
em至壤，相對長度單位威始。相對于當(dāng)前對象內(nèi)文本的字體尺寸。
如當(dāng)前對行內(nèi)文本的字體尺寸未被人為設(shè)置像街，則相對于瀏覽器的默認(rèn)字體尺寸。（引自em-CSS3參考手冊）
關(guān)于em值的計算
假設(shè)任意瀏覽器的默認(rèn)字體大小都是16px晋渺。所有未經(jīng)調(diào)整的瀏覽器中都是1em=16px镰绎。為了方便換算，我們通常在css中設(shè)置body的屬性 font-size:62.5%木西，這就使1em值變?yōu)?0px,這樣我們就可以把設(shè)計稿的px值除以10畴栖，然后換上em作為單位來進行px和em的換算，十分簡單八千，例如16px可以改寫為1.6em吗讶。
rem
由于em值不是固定的燎猛，1em在不同元素下的值會因為該元素或者該元素父元素的大小不同而不同，因此在我們多次使用時照皆，就會帶來開發(fā)的難度重绷。這時候rem(root em)應(yīng)運而生了。rem是相對于根(html)元素膜毁，這就意味著昭卓，我們只需要根據(jù)自己的需要給根元素確定一個參考值，然后通過它既可以做到只修改根元素就成比例地調(diào)整所有字體大小瘟滨，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)候醒。最大的優(yōu)點是提供一致尺寸，便于計算杂瘸。
rem倒淫，相對長度單位。相對于根元素(即html元素)font-size計算值的倍數(shù)昌简。（引自rem-CSS3參考手冊）
根元素重寫
em 和 rem 單位之間的區(qū)別是瀏覽器根據(jù)誰來轉(zhuǎn)化成px值,em是基于當(dāng)前對象內(nèi)文本的字體尺寸決定犬金，rem是基于html元素的字體大小來決定，而根(html)元素的字體大小如果沒有顯式地設(shè)置固定值去覆蓋，那么它首先來自瀏覽器設(shè)置栓袖，因此瀏覽器的字體大小設(shè)置可以影響每個使用rem單元以及每個通過em單位繼承的值裹刮。為了還原設(shè)計稿和實現(xiàn)合理的布局所以需要根元素重寫捧弃。瀏覽器縮放動態(tài)修改根元素大小可以參考以下代碼段嘴办。
<script>
var timer, style = document.head.appendChild(document.createElement("style"));
var useREM = window.useREM = Object.create({
resize: function () {
var config=this.config;
this.size=Math.max(config.min, Math.min(config.max, document.documentElement.clientWidth)) / config.num;
style.innerHTML="html{font-size: "+ this.size +"px !important;}"
return this;
},
set: function (newConfig) {
if(newConfig){
for (var a in newConfig){
if(this.config.hasOwnProperty(a)){
this.config[a]=newConfig[a];
}
}
}
this.resize();
return this;
}
}, {
size: {
value: 20,
writable: true,
configurable: false,
enumerable: true
},
config: {
value:{
max: 1200,//設(shè)置最大可視區(qū)寬
min: 900,//設(shè)置最小可視區(qū)寬
num: 10,//根據(jù)需求調(diào)整比例
delay: 100
},
writable: false,
configurable: false,
enumerable: true
}
});
addEventListener("resize", function () {
clearTimeout(timer);
timer = setTimeout(this.resize.bind(this), this.config.delay);
}.bind(useREM));
useREM.set();
</script>
同時底燎，也有人認(rèn)為這種做法在一定程度上剝奪了用戶對瀏覽器字體設(shè)置的權(quán)利，他們的觀點是rem的好處是給了我們的一個途經(jīng)去獲取用戶的偏好來影響網(wǎng)站中每一處使用rem的元素大小朱沃，無論用戶如何設(shè)置自己的瀏覽器逗物，我們的布局都能調(diào)整到合適大小。這個就暫不做討論吧失暴，日后有機會再講逗扒。
使用場景
- 如果這個屬性根據(jù)它的font-size進行測量，則使用em欠橘，其他的使用rem
- 媒體查詢中使用 rem 單位
- 不要在多列布局中使用 em 或 rem -改用 %
關(guān)于em和rem在完成模塊化組件中的應(yīng)用實例矩肩，你可以參考這篇文章。
兼容
- 所有瀏覽器都支持px肃续，除了IE8及以下版本黍檩，其它的瀏覽器都支持em和rem屬性。對于不支持它的瀏覽器痹升，就多寫一個絕對單位的聲明建炫。
- IE9/IE10在用于偽元素時或者使用字體簡寫聲明時不支持rem
- IOS Safari5.0-5.1雖然支持rem，但是在使用媒體查詢時不支持rem
工具
在這里為大家提供一個px疼蛾，em，rem單位轉(zhuǎn)換工具艺配。地址：http://pxtoem.com/
討論區(qū)
- csdn移動端和pc端兩套代碼察郁，兩種字號大小聲明衍慎，pc端用了px，沒有根據(jù)瀏覽器縮放自適應(yīng)皮钠，移動端用了rem稳捆，根據(jù)屏幕寬度重寫了根元素，實現(xiàn)了自適應(yīng)麦轰。
- 掘金主頁用了rem乔夯，在mac的chrome中根元素固定12px，但是文字大小有根據(jù)瀏覽器縮放實現(xiàn)自適應(yīng)款侵。
- 你們團隊是怎么做的末荐？
