px，em, rem的區別，在項目中怎麼使用rem.

1、px

px像素，絕對單位。像素px是相對於顯示器屏幕分辨率而言的，是一個虛擬的長度單位，是計算機系統的數字化圖像長度單位，若是px要換算成物理長度單位，須要指定精度DPI。

2、em

em是相對長度單位，至關於當前對象內文本的字體尺寸，若是當前對行內文本的字體尺寸未被人設置，則是相對於瀏覽器默認字體尺寸。他會繼承父級元素的字體大小，所以不是一個固定的值。

3、rem全稱font size of the root element

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

4、三者的區別

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

5、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得到的就是根節點的字體大小,因此這步是在動態控制根節點的字體大小。

3.綁定瀏覽器縮放與加載時間

win.addEventListener(resizeEvt, recalc, false);

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

4.DOMContentLoaded

DOMContentLoaded顧名思義，就是dom內容加載完畢。那什麼是dom內容加載完畢呢？咱們從打開一個網頁提及。當輸入一個URL，頁面的展現首先是空白的，而後過一會，頁面會展現出內容，可是頁面的有些資源好比說圖片資源還沒法看到，此時頁面是能夠正常的交互，過一段時間後，圖片才完成顯示在頁面。從頁面空白到展現出頁面內容，會觸發DOMContentLoaded事件。而這段時間就是HTML文檔被加載和解析完成。

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