px ,em ,rem

做移動端或者響應式的頁面必然需要字體的變化的。這次我就自己的經驗來說說他們之間的關系，以及怎么用。

px?(絕對單位)是我們常用的就不說了。

em（相對單位，相對父級）

em 指字體高，任意瀏覽器的默認字體高都是16px。所以未經調整的瀏覽器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。為了簡化font -size的換算，需要在css中的body選擇器中聲明Font-size=62.5%，這就使em值變為16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只需要將你的原來的px數值除以10，然后換上em作為單位就行了。

CSS代碼
html { font-size: 62.5%; }

這個換算在IE瀏覽器下不成立，1.2em會比12px稍大一些，解決辦法是把html標簽樣式中的62.5%改成63%，即：
CSS代碼
html { font-size: 63%; } ?

注：（有一點不懂的是）

你可能會在content這個div里把字體大小設為1.2em, 也就是12px。然后你又把選擇器p的字體大小也設為1.2em，但如果p屬于content的子級的話，p的字體大小就不是12px，而是1.2em= 1.2 * 12px=14.4px。這是因為content的字體大小被設為1.2em，這個em值繼承其父級元素body的大小，也就是16px * 62.5% * 1.2=12px, 而p作為其子級，em則繼承content的字體高，也就是12px。所以p的1.2em就不再是12px，而是14.4px。

所以這個用的時候會有點問題

rem（相對單位 ，css3，相對根），在ie8及ie8以下的版本不支持外其他瀏覽器都支持，如果你要考慮ie8及一下，最好把px也寫上。

我們設置html的字體大小的值為html｛font-size: 87.5%;｝（也就是14px）。然后其他的字體就是將你要的值除以14得到的值；

你根元素的字體大小選62.5%，那px和rem之間的換算就是px直接除以10就得到rem了。

?

這里我就不負責任說一句，這里是看到別人寫的，我自己還沒喲用過，不知道什么樣。

javascript方式，通過上面的公式，計算出基準值rem，然后寫入樣式，大概如下(代碼參考自kimi的m-base模塊)

var?dpr,?rem,?scale;

var?docEl?=?document.documentElement;

var?fontEl?=?document.createElement('style');

var?metaEl?=?document.querySelector('meta[name="viewport"]');

scale?=?1?/?dpr;

dpr?=?win.devicePixelRatio?||?1;

rem?=?docEl.clientWidth?*?dpr?/?10;

//?設置viewport，進行縮放，達到高清效果

metaEl.setAttribute('content',?'width='?+?dpr?*?docEl.clientWidth?+?',

?????????????????????initial-scale='?+?scale?+?',maximum-scale='?+?scale?+?',

?????????????????????minimum-scale='?+?scale?+?',user-scalable=no');

//?設置data-dpr屬性，留作的css?hack之用

docEl.setAttribute('data-dpr',?dpr);

//?動態寫入樣式

docEl.firstElementChild.appendChild(fontEl);

fontEl.innerHTML?=?'html{font-size:'?+?rem?+?'px!important;}';

//?給js調用的，某一dpr下rem和px之間的轉換函數

window.rem2px?=?function(v)?{

????v?=?parseFloat(v);

????return?v?*?rem;

};

window.px2rem:?function(v)?{

????v?=?parseFloat(v);

????return?v?/?rem;

};

window.dpr?=?dpr;

window.rem?=?rem;

這種方式，可以精確地算出不同屏幕所應有的rem基準值，缺點就是要加載這么一段js代碼，但個人覺得是這是目前最好的方案了。

因為這個方案同時解決了三個問題：

1）border: 1px問題

2）圖片高清問題

3）屏幕適配布局問題

?

推薦網頁：http://www.cocoachina.com/webapp/20150715/12585.html