整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
EM 是根據自身字體大小來轉換成像素；很多時候感覺是根據父節點來計算的，其實是子節點繼承了父節點的字體大小，無論什么情況都是先計算出本身字體大小，然后再根據自身字體的大小把 em 轉換成像素如果本身的字體也是設置的 em，則先根據父節點的字體算出自身字體的大小
rem 是根據 html 標簽的字體大小來轉換成對應的像素，而 html 的字體大小又是相對于瀏覽器設置的字體大小，默認是 16px；
如果 html 的字體大小也設置成 rem，那么這個需要根據瀏覽器的字體進行轉換。
傳統的項目開發中，我們只會用到px、%、em這幾個單位，它可以適用于大部分的項目開發，且擁有比較良好的兼容性
從CSS3開始，瀏覽器對計量單位的支持又提升到了另外一個境界，新增了rem、vh、vw、vm等一些新的計量單位
利用這些新的單位開發出比較良好的響應式頁面，適應多種不同分辨率的終端，包括移動設備等
在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：相對長度單位。基準點為父節點字體的大小，即相對于當前對象內文本的字體尺寸（繼承父節點字體大?。?。如當前對行內文本的字體尺寸未被人為設置，則相對于瀏覽器的默認字體尺寸( 16px )。
3、rem：相對長度單位。r’是“root”的縮寫，相對于根元素<html>的字體大小。
4、vh and vw：相對于視口的高度和寬度，而不是父元素的（CSS百分比是相對于包含它的最近的父元素的高度和寬度）。
5、vmin and vmax：關于視口高度和寬度兩者的最小值或者最大值。
6、pt 設備像素（物理像素）
7、dpr = 設備像素 / 設備獨立像素
8、ppi 每英寸像素，值越大，圖像越清晰
px，表示像素，所謂像素就是呈現在我們顯示器上的一個個小點，每個像素點都是大小等同的，所以像素為計量單位被分在了絕對長度單位中
有些人會把px認為是相對長度，原因在于在移動端中存在設備像素比，px實際顯示的大小是不確定的
這里之所以認為px為絕對單位，在于px的大小和元素的其他屬性無關
em是相對長度單位。相對于當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置，則相對于瀏覽器的默認字體尺寸（1em = 16px）
為了簡化 font-size 的換算，我們需要在css中的 body 選擇器中聲明font-size= 62.5%，這就使 em 值變為 16px*62.5% = 10px
這樣 12px = 1.2em, 10px = 1em, 也就是說只需要將你的原來的px 數值除以 10，然后換上 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>這時候.big元素的font-size為14px，而.small元素的font-size為12px
rem，相對單位，相對的只是HTML根元素font-size的值
同理，如果想要簡化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;使得視覺、使用、書寫都得到了極大的幫助
特點：
vw ，就是根據窗口的寬度，分成100等份，100vw就表示滿寬，50vw就表示一半寬。（vw 始終是針對窗口的寬），同理，vh則為窗口的高度
這里的窗口分成幾種情況：
像vw、vh，比較容易混淆的一個單位是%，不過百分比寬泛的講是相對于父元素：
px：絕對單位，頁面按精確像素展示
em：相對單位，基準點為父節點字體的大小，如果自身定義了font-size按自身來計算，整個頁面內1em不是一個固定的值
rem：相對單位，可理解為root em, 相對根節點html的字體大小來計算
vh、vw：主要用于頁面視口大小布局，在頁面布局上更加方便簡單
更多介紹
css中px、em、rem、%、vw、vh、vm、rpx 這些單位的區別，最全面CSS單位了解，不懂的找我 - 知乎
在css中我們通常使用px作為單位，在PC瀏覽器中css的1個像素都是對應著電腦屏幕的1個物理像素
這會造成一種錯覺，我們會認為css中的像素就是設備的物理像素
但實際情況卻并非如此，css中的像素只是一個抽象的單位，在不同的設備或不同的環境中，css中的1px所代表的設備物理像素是不同的
當我們做移動端開發時，同為1px的設置，在不同分辨率的移動設備上顯示效果卻有很大差異
這背后就涉及了css像素、設備像素、設備獨立像素、dpr、ppi的概念
設備像素指的是物理像素，一般手機的分辨率指的就是設備像素，一個設備的設備像素是不可變的。
css像素和設備獨立像素是等價的，不管在何種分辨率的設備上，css像素的大小應該是一致的，css像素是一個相對單位，它是相
對于設備像素的，一個css像素的大小取決于頁面縮放程度和dpr的大小。
dpr指的是設備像素和設備獨立像素的比值，一般的pc屏幕，dpr=1。在iphone4時，蘋果推出了retina屏幕，它的dpr
為2。屏幕的縮放會改變dpr的值。
ppi指的是每英寸的物理像素的密度，ppi越大，屏幕的分辨率越大。
CSS像素（css pixel, px）: 適用于web編程，在 CSS 中以 px 為后綴，是一個長度單位
在 CSS 規范中，長度單位可以分為兩類，絕對單位以及相對單位
px是一個相對單位，相對的是設備像素（device pixel）
一般情況，頁面縮放比為1，1個CSS像素等于1個設備獨立像素
CSS像素又具有兩個方面的相對性：
在頁面進行縮放操作也會 引起css中px的變化，假設頁面放大一倍，原來的 1px 的東西變成 2px，在實際寬度不變的情況下1px 變得跟原來的 2px 的長度（長寬）一樣了（元素會占據更多的設備像素）
假設原來需要 320px 才能填滿的寬度現在只需要 160px
px會受到下面的因素的影響而變化：
設備像素（device pixels），又稱為物理像素
指設備能控制顯示的最小物理單位，不一定是一個小正方形區塊，也沒有標準的寬高，只是用于顯示豐富色彩的一個“點”而已
可以參考公園里的景觀變色彩燈，一個彩燈(物理像素)由紅、藍、綠小燈組成，三盞小燈不同的亮度混合出各種色彩
從屏幕在工廠生產出的那天起，它上面設備像素點就固定不變了，單位為pt
設備獨立像素（Device Independent Pixel）：與設備無關的邏輯像素，代表可以通過程序控制使用的虛擬像素，是一個總體概念，包括了CSS像素
在javaScript中可以通過window.screen.width/ window.screen.height 查看
比如我們會說“電腦屏幕在 2560x1600分辨率下不適合玩游戲，我們把它調為 1440x900”，這里的“分辨率”（非嚴謹說法）指的就是設備獨立像素
一個設備獨立像素里可能包含1個或者多個物理像素點，包含的越多則屏幕看起來越清晰
至于為什么出現設備獨立像素這種虛擬像素單位概念，下面舉個例子：
iPhone 3GS 和 iPhone 4/4s 的尺寸都是 3.5 寸，但 iPhone 3GS 的分辨率是 320x480，iPhone 4/4s 的分辨率是 640x960
這意味著，iPhone 3GS 有 320 個物理像素，iPhone 4/4s 有 640 個物理像素
如果我們按照真實的物理像素進行布局，比如說我們按照 320 物理像素進行布局，到了 640 物理像素的手機上就會有一半的空白，為了避免這種問題，就產生了虛擬像素單位
我們統一 iPhone 3GS 和 iPhone 4/4s 都是 320 個虛擬像素，只是在 iPhone 3GS 上，最終 1 個虛擬像素換算成 1 個物理像素，在 iphone 4s 中，1 個虛擬像素最終換算成 2 個物理像素
至于 1 個虛擬像素被換算成幾個物理像素，這個數值我們稱之為設備像素比，也就是下面介紹的dpr
dpr（device pixel ratio），設備像素比，代表設備獨立像素到設備像素的轉換關系，在JavaScript中可以通過 window.devicePixelRatio 獲取
計算公式如下：
當設備像素比為1:1時，使用1（1×1）個設備像素顯示1個CSS像素
當設備像素比為2:1時，使用4（2×2）個設備像素顯示1個CSS像素
當設備像素比為3:1時，使用9（3×3）個設備像素顯示1個CSS像素
如下圖所示：
當dpr為3，那么1px的CSS像素寬度對應3px的物理像素的寬度，1px的CSS像素高度對應3px的物理像素高度
ppi （pixel per inch），每英寸像素，表示每英寸所包含的像素點數目，更確切的說法應該是像素密度。數值越高，說明屏幕能以更高密度顯示圖像
計算公式如下：
無縮放情況下，1個CSS像素等于1個設備獨立像素
設備像素由屏幕生產之后就不發生改變，而設備獨立像素是一個虛擬單位會發生改變
PC端中，1個設備獨立像素 = 1個設備像素 （在100%，未縮放的情況下）
在移動端中，標準屏幕（160ppi）下 1個設備獨立像素 = 1個設備像素
設備像素比（dpr） = 設備像素 / 設備獨立像素
每英寸像素（ppi），值越大，圖像越清晰
有時我們會看到有些使用rem的頁面里會先給頁面根元素一個樣式：
html {font-size: 62.5%; /*10 ÷ 16 × 100% = 62.5%*/}
為什么是62.5%？
大多數瀏覽器的默認字號是16px，因此1rem=16px，這樣不方便我們px和rem的換算，假設1rem=10px，那么100px=10rem，25px=0.25rem。這樣就好換算很多，于是就有了上面的10/16。
如果是640的設計稿，需要除以2轉化為和iphone5屏幕等寬的320。所以設計稿px單位/2/10轉為rem。之后再媒體查詢設置每個屏幕大小的font-size百分比，頁面會根據上面設置的根font-size適配。
看到這里是不是覺得一切很完美？然而，這里面有兩個深坑：
1.我看了網上很多關于rem的資料，基本都說瀏覽器的默認字號就是16px，然后直接定義font-size:62.5%。但是，rem屬于css3的屬性，有些瀏覽器的早期版本和一些國內瀏覽器的默認字號并不是16px，那么上面的10/16換算就不成立，直接給html定義font-size: 62.5%不成立。
2.chrome強制字體最小值為12px，低于12px按12px處理，那上面的1rem=10px就變成1rem=12px，出現偏差（下面給demo）。
解決方案： 將1rem=10px換為1rem=100px（或者其它容易換算的比例值）;不要在pc端使用rem。
那么上面的頁面根元素樣式要改為：
html {font-size: 625%; /*100 ÷ 16 × 100% = 625%*/}
再用本工廠總結得出的各分辨率媒體查詢換算：
@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%; }
}給大家分享我收集整理的各種學習資料，前端小白交學習流程，入門教程等回答-下面是學習資料參考。
前端學習交流、自學、學習資料等推薦 - 知乎
ss單位中分為相對長度單位、絕對長度單位。
今天我們主要講解rem、em、px這些常用單位的區別和用法。
px（絕對長度單位）
相信對于前端來說px這個單位是大家并不陌生，px這個單位，兼容性可以說是相當可以，大家對px的了解肯定是沒有很大的問題的。
em（相對長度單位）
使用：
1、瀏覽器的默認字體都是16px，那么1em=16px，以此類推計算12px=0.75em，10px=0.625em，2em=32px；
2、這樣使用很復雜，很難很好的與px進行對應,也導致書寫、使用、視覺的復雜(0.75em、0.625em全是小數點)；
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會繼承父級元素的字體大?。▍⒖嘉锸歉冈氐膄ont-size；）；
3、em中所有的字體都是相對于父元素的大小決定的；所以如果一個設置了font-size:1.2em的元素在另一個設置了font-size:1.2em的元素里，而這個元素又在另一個設置了font-size:1.2em的元素里，那么最后計算的結果是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>
但運行結果small的字體大小為：1.2em*1.2em=1.44em
如圖：
*寬度高度也是同理
rem（相對長度單位）
使用：
1、瀏覽器的默認字體都是16px，那么1rem=16px，以此類推計算12px=0.75rem，10px=0.625rem，2rem=32px；
2、這樣使用很復雜，很難很好的與px進行對應,也導致書寫、使用、視覺的復雜(0.75rem、0.625em全是小數點) ；
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單位可謂集相對大小和絕對大小的優點于一身
2、和em不同的是rem總是相對于根元素(如:root{})，而不像em一樣使用級聯的方式來計算尺寸。這種相對單位使用起來更簡單。
3、rem支持IE9及以上，意思是相對于根元素html（網頁），不會像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>
運行結果：
注意：
這就是我整體對px、em、rem區別的總結，希望對大家有幫助，我會持續進步更新我的知識庫 喜歡我的點擊下關注哦。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
