一、px

px像素，絕對(duì)單位。像素px是相對(duì)于顯示器屏幕分辨率而言的，是一個(gè)虛擬的長(zhǎng)度單位，是計(jì)算機(jī)系統(tǒng)的數(shù)字化圖像長(zhǎng)度單位，如果px要換算成物理長(zhǎng)度單位，需要指定精度DPI。

二、em

em是相對(duì)長(zhǎng)度單位，相當(dāng)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸，如果當(dāng)前對(duì)行內(nèi)文本的字體尺寸未被人設(shè)置，則是相對(duì)于瀏覽器默認(rèn)字體尺寸。他會(huì)繼承父級(jí)元素的字體大小，因此不是一個(gè)固定的值。

三、rem全稱font size of the root element

rem是css3新增的一個(gè)相對(duì)長(zhǎng)度單位，使用rem為元素設(shè)定字體大小時(shí)，相對(duì)于的是HTML根元素。

四、三者的區(qū)別

IE無(wú)法調(diào)整那些使用px作為單位的字體大小，em和rem可以縮放，rem相對(duì)的只是HTML根元素。這個(gè)單位可謂集相對(duì)大小和絕對(duì)大小的優(yōu)點(diǎn)與一身，通過(guò)它既可以做到只修改根元素就成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)，目前除了IE8及更早版本外，左右瀏覽器均以支持rem。

五、rem的使用

（1）css的使用

一般我們做頁(yè)面，肯定都會(huì)有設(shè)計(jì)圖，移動(dòng)端頁(yè)面，一般情況下，UI出圖都會(huì)定寬為640px，這也是移動(dòng)端的標(biāo)準(zhǔn)尺寸；但是，我們也不能排除可能有其他特殊的情況可能需要做其他大小的設(shè)計(jì)圖。所以，我們可以先定一個(gè)基準(zhǔn)，然后來(lái)看看isux團(tuán)隊(duì)的整理出來(lái)的一個(gè)表格：

?

通過(guò)表格，我們能很清楚的看出各種分辨率下該如何計(jì)算，例如：320下的html的font-size就應(yīng)該為320/640=0.5 所以，當(dāng)以640為基準(zhǔn)的font-size是20px時(shí)，我們就應(yīng)該給320的定義為10px;

怎么做到基于不同的分辨率來(lái)定義呢？不用說(shuō)，首先想到的肯定就是媒體查詢。當(dāng)我們基于媒體查詢來(lái)做屏幕自適應(yīng)時(shí)，首先要考慮下需要做那些屏幕，畢竟時(shí)下各種類型的手機(jī)讓人眼花繚亂，分辨率也是多種多樣，這里我做一下簡(jiǎn)單的例舉，是我在過(guò)往項(xiàng)目中涉及到常見(jiàn)的屏幕分辨率的媒體查詢：

@media only screen and (min-device-width: 320px)and (-webkit-min-device-pixel-ratio: 2) {//針對(duì)iPhone 4, 5c,5s, 所有iPhone6的放大模式，個(gè)別iPhone6的標(biāo)準(zhǔn)模式<br>　　html{<br>　　　　font-size:10px;<br>　　} } @media only screen and (min-device-width: 375px)and (-webkit-min-device-pixel-ratio: 2) {//針對(duì)大多數(shù)iPhone6的標(biāo)準(zhǔn)模式<br>　　html{<br>　　　　font-size:12px;<br>　　} }@media only screen and (min-device-width: 375px)and (-webkit-min-device-pixel-ratio: 3) {//針對(duì)所有iPhone6+的放大模式<br>　　html{<br>　　　　font-size:16px;<br>　　} } @media only screen and (min-device-width:412px) and (-webkit-min-device-pixel-ratio: 3) {//針對(duì)所有iPhone6+的標(biāo)準(zhǔn)模式,414px寫(xiě)為412px是由于三星Nexus 6為412px，可一并處理<br>　　html{<br>　　　　font-size:20px;<br>　　} }

?

?

（2）js計(jì)算

(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 這個(gè)是判斷在window對(duì)象中是否有orientationchange屬性，因?yàn)閛rientationchange會(huì)遇到兼容性問(wèn)題，有的瀏覽器不支持，所以這邊做了判斷來(lái)決定是用orientationchange還是resize（思路就是用resizeEvt這個(gè)變量來(lái)控制用哪個(gè)，后面只要用resizeEvt這個(gè)變量來(lái)監(jiān)聽(tīng)屏幕是否被調(diào)整，在下面的window.addEventListener(resizeEvt, recalc, false);中用到的就是它）

這里面“？”和“：”是一個(gè)if判斷。如果問(wèn)號(hào)前面的判斷（'orientationchange' in window ）結(jié)果為true則執(zhí)行冒號(hào)前的內(nèi)容結(jié)果為'orientationchange'（同時(shí)因?yàn)樵趈s中等號(hào)的優(yōu)先級(jí)低于三目運(yùn)算符“？："，所以還會(huì)在這之后執(zhí)行賦值，把'orientationchange'賦值給?resizeEvt 變量），如果為false則得到冒號(hào)后的?'resize'并賦值給?resizeEvt。

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

在這前面有var docEl = document.documentElement,?這是把獲得的根節(jié)點(diǎn)賦值給了docEl變量

docEl.clientWidth也就是根節(jié)點(diǎn)的當(dāng)前屏幕寬度，docEl.style.fontSize獲得的就是根節(jié)點(diǎn)的字體大小,所以這步是在動(dòng)態(tài)控制根節(jié)點(diǎn)的字體大小。

3.綁定瀏覽器縮放與加載時(shí)間

win.addEventListener(resizeEvt, recalc, false);

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

4.DOMContentLoaded

DOMContentLoaded顧名思義，就是dom內(nèi)容加載完畢。那什么是dom內(nèi)容加載完畢呢？我們從打開(kāi)一個(gè)網(wǎng)頁(yè)說(shuō)起。當(dāng)輸入一個(gè)URL，頁(yè)面的展示首先是空白的，然后過(guò)一會(huì)，頁(yè)面會(huì)展示出內(nèi)容，但是頁(yè)面的有些資源比如說(shuō)圖片資源還無(wú)法看到，此時(shí)頁(yè)面是可以正常的交互，過(guò)一段時(shí)間后，圖片才完成顯示在頁(yè)面。從頁(yè)面空白到展示出頁(yè)面內(nèi)容，會(huì)觸發(fā)DOMContentLoaded事件。而這段時(shí)間就是HTML文檔被加載和解析完成。

總結(jié)：以上是對(duì)px,em,rem的解釋與rem相關(guān)算法的解釋，此內(nèi)容有自己整理的內(nèi)容，也有借鑒與別的網(wǎng)站的一些結(jié)論，如若有不妥的地方請(qǐng)大家告知。

轉(zhuǎn)載于:https://www.cnblogs.com/zyt-it/p/10177735.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。