一、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獲得的就是根節點的字體大小,所以這步是在動態控制根節點的字體大小。

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

win.addEventListener(resizeEvt, recalc, false);

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

4.DOMContentLoaded

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

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

轉載于:https://www.cnblogs.com/zyt-it/p/10177735.html

總結

以上是生活随笔為你收集整理的px，em, rem的区别，在项目中怎么使用rem.的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。