說說 em-px-rem-vh-vw 的區別?

一、介紹

傳統的項目開發中，我們只會用到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

px

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

有些人會把px認爲是相對長度，原因在於在移動端中存在設備像素比，px實際顯示的大小是不確定的

這裏之所以認爲px爲絕對單位，在於px的大小和元素的其他屬性無關

em

em 是相對長度單位。相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人爲設置，則相對於瀏覽器的默認字體尺寸（1em = 16px）

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

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

特點：

• em 的值並不是固定的

• em 會繼承父級元素的字體大小

• em 是相對長度單位。相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人爲設置，則相對於瀏覽器的默認字體尺寸

• 任意瀏覽器的默認字體高都是 16px

舉個例子

1<div class="big">
2    我是14px=1.4rem<div class="small">我是12px=1.2rem</div>
3</div>
4
5

樣式爲

1<style>
2    html {font-size: 10px;  } /*  公式16px*62.5%=10px  */  
3    .big{font-size: 1.4rem}
4    .small{font-size: 1.2rem}
5</style>
6
7

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

rem

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

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

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

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

特點：

• rem 單位可謂集相對大小和絕對大小的優點於一身

• 和 em 不同的是 rem 總是相對於根元素，而不像 em 一樣使用級聯的方式來計算尺寸

vh、vw

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

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

• 在桌面端，指的是瀏覽器的可視區域

• 移動端指的就是佈局視口

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

• 對於普通定位元素就是我們理解的父元素

• 對於 position: absolute; 的元素是相對於已定位的父元素

• 對於 position: fixed; 的元素是相對於 ViewPort（可視窗口）

三、總結

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

「em」：相對單位，基準點爲父節點字體的大小，如果自身定義了font-size按自身來計算，整個頁面內1em不是一個固定的值

「rem」：相對單位，可理解爲root em, 相對根節點html的字體大小來計算

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

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/LYCV3MtA2U-1HEX3G5yhWg