rem和em的區(qū)別及論證

M

EM 是根據(jù)自身字體大小來轉(zhuǎn)換成像素；很多時候感覺是根據(jù)父節(jié)點來計算的，其實是子節(jié)點繼承了父節(jié)點的字體大小，無論什么情況都是先計算出本身字體大小，然后再根據(jù)自身字體的大小把 em 轉(zhuǎn)換成像素如果本身的字體也是設(shè)置的 em，則先根據(jù)父節(jié)點的字體算出自身字體的大小

REM

rem 是根據(jù) html 標(biāo)簽的字體大小來轉(zhuǎn)換成對應(yīng)的像素，而 html 的字體大小又是相對于瀏覽器設(shè)置的字體大小，默認(rèn)是 16px；
如果 html 的字體大小也設(shè)置成 rem，那么這個需要根據(jù)瀏覽器的字體進行轉(zhuǎn)換。

論證代碼

紹

傳統(tǒng)的項目開發(fā)中，我們只會用到px、%、em這幾個單位，它可以適用于大部分的項目開發(fā)，且擁有比較良好的兼容性

從CSS3開始，瀏覽器對計量單位的支持又提升到了另外一個境界，新增了rem、vh、vw、vm等一些新的計量單位

利用這些新的單位開發(fā)出比較良好的響應(yīng)式頁面，適應(yīng)多種不同分辨率的終端，包括移動設(shè)備等

單位

在css單位中，可以分為長度單位、絕對單位，如下表所指示

CSS單位
相對長度單位	em、ex、ch、rem、vw、vh、vmin、vmax、%
絕對長度單位	cm、mm、in、px、pt、pc

這里我們主要講述px、em、rem、vh、vw

1、px：相對長度單位。像素px是相對于顯示器屏幕分辨率而言的。

2、em：相對長度單位。基準(zhǔn)點為父節(jié)點字體的大小，即相對于當(dāng)前對象內(nèi)文本的字體尺寸（繼承父節(jié)點字體大小）。如當(dāng)前對行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對于瀏覽器的默認(rèn)字體尺寸( 16px )。

3、rem：相對長度單位。r’是“root”的縮寫，相對于根元素<html>的字體大小。

4、vh and vw：相對于視口的高度和寬度，而不是父元素的（CSS百分比是相對于包含它的最近的父元素的高度和寬度）。

5、vmin and vmax：關(guān)于視口高度和寬度兩者的最小值或者最大值。

6、pt 設(shè)備像素（物理像素）

7、dpr = 設(shè)備像素 / 設(shè)備獨立像素

8、ppi 每英寸像素，值越大，圖像越清晰

px

px，表示像素，所謂像素就是呈現(xiàn)在我們顯示器上的一個個小點，每個像素點都是大小等同的，所以像素為計量單位被分在了絕對長度單位中

有些人會把px認(rèn)為是相對長度，原因在于在移動端中存在設(shè)備像素比，px實際顯示的大小是不確定的

這里之所以認(rèn)為px為絕對單位，在于px的大小和元素的其他屬性無關(guān)

em

em是相對長度單位。相對于當(dāng)前對象內(nèi)文本的字體尺寸。如當(dāng)前對行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對于瀏覽器的默認(rèn)字體尺寸（1em = 16px）

為了簡化 font-size 的換算，我們需要在css中的 body 選擇器中聲明font-size= 62.5%，這就使 em 值變?yōu)?16px*62.5% = 10px

這樣 12px = 1.2em, 10px = 1em, 也就是說只需要將你的原來的px 數(shù)值除以 10，然后換上 em作為單位就行了

特點：

em 的值并不是固定的
em 會繼承父級元素的字體大小
em 是相對長度單位。相對于當(dāng)前對象內(nèi)文本的字體尺寸。如當(dāng)前對行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對于瀏覽器的默認(rèn)字體尺寸
任意瀏覽器的默認(rèn)字體高都是 16px

舉個例子

<div class="big">
    我是14px=1.4rem<div class="small">我是12px=1.2rem</div>
</div>

樣式為

<style>
    html {font-size: 10px;  } /*  公式16px*62.5%=10px  */  
    .big{font-size: 1.4rem}
    .small{font-size: 1.2rem}
</style>

這時候.big元素的font-size為14px，而.small元素的font-size為12px

rem

rem，相對單位，相對的只是HTML根元素font-size的值

同理，如果想要簡化font-size的轉(zhuǎn)化，我們可以在根元素html中加入font-size: 62.5%

html {font-size: 62.5%;  } /*  公式16px*62.5%=10px  */

這樣頁面中1rem=10px、1.2rem=12px、1.4rem=14px、1.6rem=16px;使得視覺、使用、書寫都得到了極大的幫助

特點：

rem單位可謂集相對大小和絕對大小的優(yōu)點于一身
和em不同的是rem總是相對于根元素，而不像em一樣使用級聯(lián)的方式來計算尺寸

vh、vw

vw ，就是根據(jù)窗口的寬度，分成100等份，100vw就表示滿寬，50vw就表示一半寬。（vw 始終是針對窗口的寬），同理，vh則為窗口的高度

這里的窗口分成幾種情況：

在桌面端，指的是瀏覽器的可視區(qū)域
移動端指的就是布局視口

像vw、vh，比較容易混淆的一個單位是%，不過百分比寬泛的講是相對于父元素：

對于普通定位元素就是我們理解的父元素
對于position: absolute;的元素是相對于已定位的父元素
對于position: fixed;的元素是相對于 ViewPort（可視窗口）

總結(jié)

px：絕對單位，頁面按精確像素展示

em：相對單位，基準(zhǔn)點為父節(jié)點字體的大小，如果自身定義了font-size按自身來計算，整個頁面內(nèi)1em不是一個固定的值

rem：相對單位，可理解為root em, 相對根節(jié)點html的字體大小來計算

vh、vw：主要用于頁面視口大小布局，在頁面布局上更加方便簡單

更多介紹

css中px、em、rem、%、vw、vh、vm、rpx 這些單位的區(qū)別，最全面CSS單位了解，不懂的找我 - 知乎

設(shè)備獨立像素dpr、ppi

像素背景

在css中我們通常使用px作為單位，在PC瀏覽器中css的1個像素都是對應(yīng)著電腦屏幕的1個物理像素

這會造成一種錯覺，我們會認(rèn)為css中的像素就是設(shè)備的物理像素

但實際情況卻并非如此，css中的像素只是一個抽象的單位，在不同的設(shè)備或不同的環(huán)境中，css中的1px所代表的設(shè)備物理像素是不同的

當(dāng)我們做移動端開發(fā)時，同為1px的設(shè)置，在不同分辨率的移動設(shè)備上顯示效果卻有很大差異

這背后就涉及了css像素、設(shè)備像素、設(shè)備獨立像素、dpr、ppi的概念

像素介紹

設(shè)備像素指的是物理像素，一般手機的分辨率指的就是設(shè)備像素，一個設(shè)備的設(shè)備像素是不可變的。

css像素和設(shè)備獨立像素是等價的，不管在何種分辨率的設(shè)備上，css像素的大小應(yīng)該是一致的，css像素是一個相對單位，它是相

對于設(shè)備像素的，一個css像素的大小取決于頁面縮放程度和dpr的大小。

dpr指的是設(shè)備像素和設(shè)備獨立像素的比值，一般的pc屏幕，dpr=1。在iphone4時，蘋果推出了retina屏幕，它的dpr

為2。屏幕的縮放會改變dpr的值。

ppi指的是每英寸的物理像素的密度，ppi越大，屏幕的分辨率越大。

CSS像素

CSS像素（css pixel, px）: 適用于web編程，在 CSS 中以 px 為后綴，是一個長度單位

在 CSS 規(guī)范中，長度單位可以分為兩類，絕對單位以及相對單位

px是一個相對單位，相對的是設(shè)備像素（device pixel）

一般情況，頁面縮放比為1，1個CSS像素等于1個設(shè)備獨立像素

CSS像素又具有兩個方面的相對性：

在同一個設(shè)備上，每1個 CSS 像素所代表的設(shè)備像素是可以變化的（比如調(diào)整屏幕的分辨率）
在不同的設(shè)備之間，每1個 CSS 像素所代表的設(shè)備像素是可以變化的（比如兩個不同型號的手機）

在頁面進行縮放操作也會引起css中px的變化，假設(shè)頁面放大一倍，原來的 1px 的東西變成 2px，在實際寬度不變的情況下1px 變得跟原來的 2px 的長度（長寬）一樣了（元素會占據(jù)更多的設(shè)備像素）

假設(shè)原來需要 320px 才能填滿的寬度現(xiàn)在只需要 160px

px會受到下面的因素的影響而變化：

每英寸像素（PPI）
設(shè)備像素比（DPR）

設(shè)備像素

設(shè)備像素（device pixels），又稱為物理像素

指設(shè)備能控制顯示的最小物理單位，不一定是一個小正方形區(qū)塊，也沒有標(biāo)準(zhǔn)的寬高，只是用于顯示豐富色彩的一個“點”而已

可以參考公園里的景觀變色彩燈，一個彩燈(物理像素)由紅、藍(lán)、綠小燈組成，三盞小燈不同的亮度混合出各種色彩

從屏幕在工廠生產(chǎn)出的那天起，它上面設(shè)備像素點就固定不變了，單位為pt

設(shè)備獨立像素

設(shè)備獨立像素（Device Independent Pixel）：與設(shè)備無關(guān)的邏輯像素，代表可以通過程序控制使用的虛擬像素，是一個總體概念，包括了CSS像素

在javaScript中可以通過window.screen.width/ window.screen.height 查看

比如我們會說“電腦屏幕在 2560x1600分辨率下不適合玩游戲，我們把它調(diào)為 1440x900”，這里的“分辨率”（非嚴(yán)謹(jǐn)說法）指的就是設(shè)備獨立像素

一個設(shè)備獨立像素里可能包含1個或者多個物理像素點，包含的越多則屏幕看起來越清晰

至于為什么出現(xiàn)設(shè)備獨立像素這種虛擬像素單位概念，下面舉個例子：

iPhone 3GS 和 iPhone 4/4s 的尺寸都是 3.5 寸，但 iPhone 3GS 的分辨率是 320x480，iPhone 4/4s 的分辨率是 640x960

這意味著，iPhone 3GS 有 320 個物理像素，iPhone 4/4s 有 640 個物理像素

如果我們按照真實的物理像素進行布局，比如說我們按照 320 物理像素進行布局，到了 640 物理像素的手機上就會有一半的空白，為了避免這種問題，就產(chǎn)生了虛擬像素單位

我們統(tǒng)一 iPhone 3GS 和 iPhone 4/4s 都是 320 個虛擬像素，只是在 iPhone 3GS 上，最終 1 個虛擬像素?fù)Q算成 1 個物理像素，在 iphone 4s 中，1 個虛擬像素最終換算成 2 個物理像素

至于 1 個虛擬像素被換算成幾個物理像素，這個數(shù)值我們稱之為設(shè)備像素比，也就是下面介紹的dpr

dpr

dpr（device pixel ratio），設(shè)備像素比，代表設(shè)備獨立像素到設(shè)備像素的轉(zhuǎn)換關(guān)系，在JavaScript中可以通過 window.devicePixelRatio 獲取

計算公式如下：

當(dāng)設(shè)備像素比為1:1時，使用1（1×1）個設(shè)備像素顯示1個CSS像素

當(dāng)設(shè)備像素比為2:1時，使用4（2×2）個設(shè)備像素顯示1個CSS像素

當(dāng)設(shè)備像素比為3:1時，使用9（3×3）個設(shè)備像素顯示1個CSS像素

如下圖所示：

當(dāng)dpr為3，那么1px的CSS像素寬度對應(yīng)3px的物理像素的寬度，1px的CSS像素高度對應(yīng)3px的物理像素高度

ppi

ppi （pixel per inch），每英寸像素，表示每英寸所包含的像素點數(shù)目，更確切的說法應(yīng)該是像素密度。數(shù)值越高，說明屏幕能以更高密度顯示圖像

計算公式如下：

總結(jié)

無縮放情況下，1個CSS像素等于1個設(shè)備獨立像素

設(shè)備像素由屏幕生產(chǎn)之后就不發(fā)生改變，而設(shè)備獨立像素是一個虛擬單位會發(fā)生改變

PC端中，1個設(shè)備獨立像素 = 1個設(shè)備像素（在100%，未縮放的情況下）

在移動端中，標(biāo)準(zhǔn)屏幕（160ppi）下 1個設(shè)備獨立像素 = 1個設(shè)備像素

設(shè)備像素比（dpr） = 設(shè)備像素 / 設(shè)備獨立像素

每英寸像素（ppi），值越大，圖像越清晰

前端頁面適配的rem換算

有時我們會看到有些使用rem的頁面里會先給頁面根元素一個樣式：

html {font-size: 62.5%; /*10 ÷ 16 × 100% = 62.5%*/}

為什么是62.5%？

大多數(shù)瀏覽器的默認(rèn)字號是16px，因此1rem=16px，這樣不方便我們px和rem的換算，假設(shè)1rem=10px，那么100px=10rem，25px=0.25rem。這樣就好換算很多，于是就有了上面的10/16。

如果是640的設(shè)計稿，需要除以2轉(zhuǎn)化為和iphone5屏幕等寬的320。所以設(shè)計稿px單位/2/10轉(zhuǎn)為rem。之后再媒體查詢設(shè)置每個屏幕大小的font-size百分比，頁面會根據(jù)上面設(shè)置的根font-size適配。

看到這里是不是覺得一切很完美？然而，這里面有兩個深坑：

1.我看了網(wǎng)上很多關(guān)于rem的資料，基本都說瀏覽器的默認(rèn)字號就是16px，然后直接定義font-size:62.5%。但是，rem屬于css3的屬性，有些瀏覽器的早期版本和一些國內(nèi)瀏覽器的默認(rèn)字號并不是16px，那么上面的10/16換算就不成立，直接給html定義font-size: 62.5%不成立。

2.chrome強制字體最小值為12px，低于12px按12px處理，那上面的1rem=10px就變成1rem=12px，出現(xiàn)偏差（下面給demo）。

解決方案： 將1rem=10px換為1rem=100px（或者其它容易換算的比例值）;不要在pc端使用rem。

那么上面的頁面根元素樣式要改為：

html {font-size: 625%; /*100 ÷ 16 × 100% = 625%*/}

再用本工廠總結(jié)得出的各分辨率媒體查詢換算：

@media screen and (min-width:360px) and (max-width:374px) and (orientation:portrait) {
    html { font-size: 703%; }
}
@media screen and (min-width:375px) and (max-width:383px) and (orientation:portrait) {
    html { font-size: 732.4%; }
}
@media screen and (min-width:384px) and (max-width:399px) and (orientation:portrait) {
    html { font-size: 750%; }
}
@media screen and (min-width:400px) and (max-width:413px) and (orientation:portrait) {
    html { font-size: 781.25%; }
}
@media screen and (min-width:414px) and (max-width:431px) and (orientation:portrait){
    html { font-size: 808.6%; }
}
@media screen and (min-width:432px) and (max-width:479px) and (orientation:portrait){
    html { font-size: 843.75%; }
}

給大家分享我收集整理的各種學(xué)習(xí)資料，前端小白交學(xué)習(xí)流程，入門教程等回答-下面是學(xué)習(xí)資料參考。

前端學(xué)習(xí)交流、自學(xué)、學(xué)習(xí)資料等推薦 - 知乎

ss單位中分為相對長度單位、絕對長度單位。

今天我們主要講解rem、em、px這些常用單位的區(qū)別和用法。

px（絕對長度單位）

相信對于前端來說px這個單位是大家并不陌生，px這個單位，兼容性可以說是相當(dāng)可以，大家對px的了解肯定是沒有很大的問題的。

em（相對長度單位）

使用：

1、瀏覽器的默認(rèn)字體都是16px，那么1em=16px，以此類推計算12px=0.75em，10px=0.625em，2em=32px；

2、這樣使用很復(fù)雜，很難很好的與px進行對應(yīng),也導(dǎo)致書寫、使用、視覺的復(fù)雜(0.75em、0.625em全是小數(shù)點)；

3、為了簡化font-size的換算，我們在body中寫入一下代碼

body {font-size: 62.5%; } /* 公式16px*62.5%=10px */

這樣頁面中1em=10px,1.2em=12px,1.4em=14px,1.6em=16px，使得視覺、使用、書寫都得到了極大的幫助。

例子如下：

<div class="font1" style='font-size:1.6em'>我是1.6em</div>

運行效果為：

缺點：

1、em的值并不是固定的；

2、em會繼承父級元素的字體大小（參考物是父元素的font-size；）；

3、em中所有的字體都是相對于父元素的大小決定的；所以如果一個設(shè)置了font-size:1.2em的元素在另一個設(shè)置了font-size:1.2em的元素里，而這個元素又在另一個設(shè)置了font-size:1.2em的元素里，那么最后計算的結(jié)果是1.2X1.2X1.2=1.728em

例如：

<div class="big">
 我是大字體
 <div class="small">我是小字體</div>
</div>

樣式為

<style>
 body {font-size: 62.5%; } /* 公式:16px*62.5%=10px */ 
 .big{font-size: 1.2em}
 .small{font-size: 1.2em}
</style>

但運行結(jié)果small的字體大小為：1.2em*1.2em=1.44em

如圖：

*寬度高度也是同理

rem（相對長度單位）

使用：

1、瀏覽器的默認(rèn)字體都是16px，那么1rem=16px，以此類推計算12px=0.75rem，10px=0.625rem，2rem=32px；

2、這樣使用很復(fù)雜，很難很好的與px進行對應(yīng),也導(dǎo)致書寫、使用、視覺的復(fù)雜(0.75rem、0.625em全是小數(shù)點) ；

3、為了簡化font-size的換算，我們在根元素html中加入font-size: 62.5%;

html {font-size: 62.5%; } /* 公式16px*62.5%=10px */

這樣頁面中1rem=10px,1.2rem=12px,1.4rem=14px,1.6rem=16px;使得視覺、使用、書寫都得到了極大的幫助；

例子如下：

<div class="font1" style='font-size:1.6rem'>我是1.6rem=16px</div>

運行效果為：

特點：

1、rem單位可謂集相對大小和絕對大小的優(yōu)點于一身

2、和em不同的是rem總是相對于根元素(如:root{})，而不像em一樣使用級聯(lián)的方式來計算尺寸。這種相對單位使用起來更簡單。

3、rem支持IE9及以上，意思是相對于根元素html（網(wǎng)頁），不會像em那樣，依賴于父元素的字體大小，而造成混亂。使用起來安全了很多。

例如：

<div class="big">
 我是14px=1.4rem<div class="small">我是12px=1.2rem</div>
</div>

樣式為：

<style>
 html {font-size: 10px; } /* 公式16px*62.5%=10px */ 
 .big{font-size: 1.4rem}
 .small{font-size: 1.2rem}
</style>

運行結(jié)果：

注意：

值得注意的瀏覽器支持問題： IE8，Safari 4或 iOS 3.2中不支持rem單位。如果你的用戶群都使用最新版的瀏覽器，那推薦使用rem，如果要考慮兼容性，那就使用px,或者兩者同時使用。

這就是我整體對px、em、rem區(qū)別的總結(jié)，希望對大家有幫助，我會持續(xù)進步更新我的知識庫喜歡我的點擊下關(guān)注哦。

在線咨詢

上一篇：用HTML制作一個簡單頁面（代碼閱讀練習(xí)）-零基礎(chǔ)自學(xué)網(wǎng)頁制作
下一篇：中獎了沒領(lǐng)到紅包？來看看線上有獎競答紅包領(lǐng)取方式→

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

rem和em的區(qū)別及論證

M

REM

論證代碼

紹

單位

px

em

rem

vh、vw

總結(jié)

設(shè)備獨立像素dpr、ppi

像素背景

像素介紹

CSS像素

設(shè)備像素

設(shè)備獨立像素

dpr

ppi

總結(jié)

前端頁面適配的rem換算

您的項目需求