前言

在傳統項目開發中，我們只會用到 px、%、em 這幾個單位長度，它們可以適用大部分項目的開發，并且擁有較好的兼容性。

而從 css3 開始，瀏覽器對邏輯單位的支持又提升了新的境界，增加了 rem、vh、vw、vm 等新的單位長度。

新技術的出現必然是為了解決舊技術存在的問題和不便，我們利用這些新的單位可以開發出更為完善的響應式頁面，從而覆蓋更多不同分辨率的終端。

下面介紹下它們分別是什么？以及如何使用？

px

px 像素(Pixel)，是指由圖像的小方格組成的，可以將像素視為整個圖像中不可分割的單位或者是元素。

比如我們常常聽到的電腦像素是 1024x768 的，表示的是水平方向是 1024 個像素點，垂直方向是 768個 像素點。

px 是圖像的絕對長度單位，是相對于顯示器屏幕分辨率而言的，是圖像上最小的一個點，一旦設置了就無法因為適應頁面大小而改變。

為了解決 px 的問題，提出了相對長度單位 em 。

em

em 是相對長度單位，在 font-size 中使用是相對于父元素的字體大小；在其他屬性中使用是相對于當前對象內文本的字體尺寸。如沒有對行內文本的字體尺寸設置，則相對于瀏覽器的默認字體尺寸，一般為 16px。

em 單位如何轉換為像素值

任意瀏覽器的默認字體高 (font-size) 都是 16px。所有未經調整的瀏覽器都符合: 1em=16px。那么 12px=0.75em，10px=0.625em。

em 值等于，實際 px 值除以父級 font-size 值。

為了簡化 font-size 的換算，需要在 css 中的 body 選擇器中聲明 Font-size=62.5% ，這就使 em 值變為 16px*62.5%=10px，這樣 12px=1.2em，10px=1em，也就是說只需要將你的原來的 px 數值除以 10，然后換上 em 作為單位就行了。

所以我們在寫 CSS 的時候，需要注意兩點：

body選擇器中聲明 Font-size=62.5%；

將你的原來的 px 數值除以 10，然后換上 em 作為單位；

重新計算那些被放大的字體的 em 數值。避免字體大小的重復聲明。

也就是避免 1.2 * 1.2= 1.44 的現象。比如說你在 #content 中聲明了字體大小為 1.2em，那么在聲明 p 的字體大小時就只能是 1em，而不是 1.2em, 因為此 em 非彼 em，它因繼承 #content 的字體高而變為了 1em=12px。

em 的值并不是固定的，而是會繼承父級元素的字體大小，所以 em 使用起來依舊有諸多不便，復雜的嵌套邏輯使得更改了部分元素會產生字體大小變化的連鎖反應。

rem

rem 是 CSS3 新增加的相對單位，即 root em，是相較于根元素(html)。rem 的根據根節點使得計算更清晰。

這個單位可謂集相對大小和絕對大小的優點于一身，通過它既可以做到只修改根元素就成比例地調整所有字體大小，又可以避免字體大小逐層復合的連鎖反應。

目前，除了IE8及更早版本外，所有瀏覽器均已支持 rem。對于不支持它的瀏覽器，應對方法也很簡單，就是多寫一個絕對單位的聲明。這些瀏覽器會忽略用 rem 設定的字體大小。

下面就是一個例子：

p {font-size:14px; font-size:.875rem;}

注意： 選擇使用什么字體單位主要由你的項目來決定，如果你的用戶群都使用最新版的瀏覽器，那推薦使用 rem，如果要考慮兼容性，那就使用 px，或者兩者同時使用。

rem 單位如何轉換為像素值

當使用 rem 單位，他們轉化為像素大小取決于頁根元素的字體大小，即 html 元素的字體大小。

html {font-size: 16px; }

例如，根元素的字體大小 16px，10rem 將等同于 160px，即 10 x 16 = 160。

rem 值等于，實際 px 值除以根 html 的 font-size 值。

px 與 rem 的選擇？

對于只需要適配少部分手機設備，且分辨率對頁面影響不大的，使用 px 即可 。

對于需要適配各種移動設備，使用 rem，例如只需要適配 iPhone 和 iPad 等分辨率差別比較挺大的設備。

vw、vh

vw、vh、vmax、vmin 這四個單位都是基于視口

vw 是相對視口(viewport)的寬度而定的，長度等于視口寬度的 1/100

假如瀏覽器的寬度為 200px，那么 1vw 就等于 2px(200px/100)

vh 是相對視口(viewport)的高度而定的，長度等于視口高度的 1/100

假如瀏覽器的高度為 500px，那么 1vh 就等于 5px(500px/100)

vmin 和 vmax 是相對于視口的高度和寬度兩者之間的最小值或最大值

%(百分比)

在許多情況下，百分比與長度的處理方法是一樣的。百分比的問題在于，它們總是相對于其他值設置的。例如，如果將元素的字體大小設置為百分比，那么它將是元素父元素字體大小的百分比。如果使用百分比作為寬度值，那么它將是父值寬度的百分比。

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

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

3、對于 position: fixed; 的元素是相對于 ViewPort(可視窗口)

vm

css3 新單位，相對于視口的寬度或高度中較小的那個

其中最小的那個被均分為 100 單位的 vm

比如：瀏覽器高度 900px，寬度 1200px，取最小的瀏覽器高度，1 vm = 900px/100 = 9 px

缺點：兼容性差

實例

em

<div>我是父元素div<p>我是子元素p<span>我是孫元素span</span></p> </div> div {font-size: 40px;width: 10em; /* 400px，每份em為font-size的大小，10*40=400 */height: 10em;border: solid 1px black; } p {font-size: 0.5em; /* 20px，每份em為父級div的font-size大小，0.5*40=20 */ width: 10em; /* 200px */height: 10em;border: solid 1px red; } span {font-size: 0.5em; /* 邏輯上為 10px，每份em為父級p的font-size大小，0.5*20=10 */width: 10em; /* 邏輯上為100px，10*10=100 */height: 10em;border: solid 1px blue;display: block; }

chrome 設置的最小字體大小為 12px，也就是說低于 12px的字體大小會被默認為 12px。

使用 em 單位存在繼承的時候，情況會變得比較棘手，因為每個元素將自動繼承其父元素的字體大小。 繼承效果只能被明確的字體單位覆蓋，比如 px,vw

使用 em 單位的元素字體大小根據它們來定。 但該元素可能繼承其父元素的字體大小，而父元素又繼承其父元素的字體大小，等等。 因此，以 em 為單位的元素字體大小可能會受到其任何父元素的字體大小影響。

rem

rem 是全部的長度都相對于根元素 html。通常做法是給 html 元素設置一個字體大小，然后其他元素的長度單位就為rem。

<div>我是父元素div<p>我是子元素p<span>我是孫元素span</span></p> </div> html {font-size: 10px; } div {font-size: 4rem; /* 40px */width: 30rem; /* 300px */height: 30rem;border: solid 1px black; } p {font-size: 2rem; /* 20px */width: 15rem;height: 15rem;border: solid 1px red; } span {font-size: 1.5rem; /* 15px */width: 10rem;height: 10rem;border: solid 1px blue;display: block; }

總結

• px 是固定的像素，一旦設置了就無法因為適應頁面大小而改變。
• em 和 rem 相對于 px 更具有靈活性，更適用于響應式布局，em 相對于父元素，rem 相對于根元素。
• 由于 em 存在繼承關系，每個元素會自動繼承其父元素的字體大小，嵌套使用時容易發生連鎖反應；
• 而使用 rem 只有一個根元素 html 參照物，計算更為清晰

總結

以上是生活随笔為你收集整理的css px em rem % vw vh vm 区别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。