說說em/px/%/rem/vh/vw/vm的差別?

背景介紹

我們為什麼要選擇合适的網頁設計機關

随着Web的發展，對新的解決方案的需求也會繼續增大，對網頁的要求更高。

網頁設計機關是涉及到我們布局的效果，使用不同的機關會對最終的demo，會有影響。

現在都是要求響應式設計，需要适配各種裝置，電腦，手機，平闆。如果機關不合适，可能在這個裝置顯示良好，那個裝置就會打亂布局。

是以需要我們選擇合适的機關來進行開發，設計。

一、介紹

傳統的項目開發中，我們隻會用到

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，表示像素，所謂像素就是呈現在我們顯示器上的一個個小點，比如常常聽到的電腦像素是1024x768的，表示的是水準方向是1024個像素點，垂直方向是768個像素點。每個像素點都是大小等同的，是以像素為計量機關被分在了絕對長度機關中。

有些人會把

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

舉個例子

<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

%

一般來說就是相對于父元素的，

1、對于普通定位元素就是我們了解的父元素

2、對于position: absolute;的元素是相對于已定位的父元素

3、對于position: fixed;的元素是相對于ViewPort（可視視窗），

rem

css3新機關，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;使得視覺、使用、書寫都得到了極大的幫助

特點：

• rem機關可謂集相對大小和絕對大小的優點于一身
• 和em不同的是rem總是相對于根元素，而不像em一樣使用級聯的方式來計算尺寸，隻需要設定根目錄的大小就可以把整個頁面的成比例的調好

vh、vw

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

vh

則為視窗的高度

這裡的視窗分成幾種情況：

• 在桌面端，指的是浏覽器的可視區域(即window.innerWidth/window.innerHeight大小，不包含工作列标題欄以及底部工具欄的浏覽器區域大小)
• 移動端指的就是布局視口

舉個例子：浏覽器寬度1200px, 1 vw = 1200px/100 = 12 px。

                  浏覽器高度900px, 1 vh = 900px/100 = 9 px。

像

vw

、

vh

，比較容易混淆的一個機關是

%

，不過百分比寬泛的講是相對于父元素：

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

vm

css3新機關，相對于視口的寬度或高度中較小的那個。其中最小的那個被均分為100機關的vm 舉個例子：浏覽器高度900px，寬度1200px，取最小的浏覽器高度，1 vm = 900px/100 = 9 px。

相容性太差 ，現在基本上沒人用，我試了一下Chrome就用不了。 

Vmin:取Vw或Vh中較小的那一個

Vmax:取Vw或Vh中較大的那一個

三、總結

「px」：絕對機關，頁面按精确像素展示

「em」：相對機關，基準點為父節點字型的大小，如果自身定義了

font-size

按自身來計算，整個頁面内

1em

不是一個固定的值

「rem」：相對機關，可了解為

root em

, 相對根節點

html

的字型大小來計算

「vh、vw」：主要用于頁面視口大小布局，在頁面布局上更加友善簡單