一、px

px畫素，絕對單位。畫素px是相對於顯示器螢幕解析度而言的，是一個虛擬的長度單位，是計算機系統的數字化影象長度單位，如果px要換算成物理長度單位，需要指定精度DPI。

二、em

em是相對長度單位，相當於當前物件內文字的字型尺寸，如果當前對行內文字的字型尺寸未被人設定，則是相對於瀏覽器預設字型尺寸。他會繼承父級元素的字型大小，因此不是一個固定的值。

三、rem全稱font size of the root element

rem是css3新增的一個相對長度單位，使用rem為元素設定字型大小時，相對於的是HTML根元素。

四、三者的區別

IE無法調整那些使用px作為單位的字型大小，em和rem可以縮放，rem相對的只是HTML根元素。這個單位可謂集相對大小和絕對大小的優點與一身，通過它既可以做到只修改根元素就成比例地調整所有字型大小，又可以避免字型大小逐層複合的連鎖反應，目前除了IE8及更早版本外，左右瀏覽器均以支援rem。

五、rem的使用

（1）css的使用

一般我們做頁面，肯定都會有設計圖，移動端頁面，一般情況下，UI出圖都會定寬為640px，這也是移動端的標準尺寸；但是，我們也不能排除可能有其他特殊的情況可能需要做其他大小的設計圖。所以，我們可以先定一個基準，然後來看看isux團隊的整理出來的一個表格：

通過表格，我們能很清楚的看出各種解析度下該如何計算，例如：320下的html的font-size就應該為320/640=0.5 所以，當以640為基準的font-size是20px時，我們就應該給320的定義為10px;

怎麼做到基於不同的解析度來定義呢？不用說，首先想到的肯定就是媒體查詢。當我們基於媒體查詢來做螢幕自適應時，首先要考慮下需要做那些螢幕，畢竟時下各種型別的手機讓人眼花繚亂，解析度也是多種多樣，這裡我做一下簡單的例舉，是我在過往專案中涉及到常見的螢幕解析度的媒體查詢：

@media only screen and (min-device-width: 320px)and (-webkit-min-device-pixel-ratio: 2) {
   //針對iPhone 4, 5c,5s, 所有iPhone6的放大模式，個別iPhone6的標準模式<br>　　html{<br>　　　　font-size:10px;<br>　　}
}
@media only screen and (min-device-width: 375px)and (-webkit-min-device-pixel-ratio: 2) {
　　//針對大多數iPhone6的標準模式<br>　　html{<br>　　　　font-size:12px;<br>　　}
 

}
   
@media only screen and (min-device-width: 375px)and (-webkit-min-device-pixel-ratio: 3) {
　　//針對所有iPhone6+的放大模式<br>　　html{<br>　　　　font-size:16px;<br>　　}
   
}
@media only screen and (min-device-width:412px) and (-webkit-min-device-pixel-ratio: 3) {
　　//針對所有iPhone6+的標準模式,414px寫為412px是由於三星Nexus 6為412px，可一併處理<br>　　html{<br>　　　　font-size:20px;<br>　　}
}

（2）js計算

(function (doc, win) {
       var docEl = doc.documentElement,
           resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
           recalc = function () {
               var clientWidth = docEl.clientWidth;
               if (!clientWidth) return;
               if(clientWidth>=640){
                   docEl.style.fontSize = '100px';
               }else{
                   docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
               }
           };
 
       if (!doc.addEventListener) return;
       win.addEventListener(resizeEvt, recalc, false);
       doc.addEventListener('DOMContentLoaded', recalc, false);
   })(document, window);

上面程式碼中使用事件的解釋：

1.   resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

'orientationchange' in window 這個是判斷在window物件中是否有orientationchange屬性，因為orientationchange會遇到相容性問題，有的瀏覽器不支援，所以這邊做了判斷來決定是用orientationchange還是resize（思路就是用resizeEvt這個變數來控制用哪個，後面只要用resizeEvt這個變數來監聽螢幕是否被調整，在下面的window.addEventListener(resizeEvt, recalc, false);中用到的就是它）

這裡面“？”和“：”是一個if判斷。如果問號前面的判斷（'orientationchange' in window ）結果為true則執行冒號前的內容結果為'orientationchange'（同時因為在js中等號的優先順序低於三目運算子“？："，所以還會在這之後執行賦值，把'orientationchange'賦值給 resizeEvt 變數），如果為false則得到冒號後的 'resize'並賦值給 resizeEvt。

2.   docEl.style.fontSize = 100 * (docEl.clientWidth / 640) + 'px';這一句

在這前面有var docEl = document.documentElement, 這是把獲得的根節點賦值給了docEl變數

docEl.clientWidth也就是根節點的當前螢幕寬度，docEl.style.fontSize獲得的就是根節點的字型大小,所以這步是在動態控制根節點的字型大小。

win.addEventListener(resizeEvt, recalc, false);

doc.addEventListener('DOMContentLoaded', recalc, false);

4.DOMContentLoaded

DOMContentLoaded顧名思義，就是dom內容載入完畢。那什麼是dom內容載入完畢呢？我們從開啟一個網頁說起。當輸入一個URL，頁面的展示首先是空白的，然後過一會，頁面會展示出內容，但是頁面的有些資源比如說圖片資源還無法看到，此時頁面是可以正常的互動，過一段時間後，圖片才完成顯示在頁面。從頁面空白到展示出頁面內容，會觸發DOMContentLoaded事件。而這段時間就是HTML文件被載入和解析完成。

總結：以上是對px,em,rem的解釋與rem相關演算法的解釋，此內容有自己整理的內容，也有借鑑與別的網站的一些結論，如若有不妥的地方請大家告知。