前言

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

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

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

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

px

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

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

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

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

em

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

em 單位如何轉(zhuǎn)換為像素值

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

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

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

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

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

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

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

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

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

rem

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

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

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

下面就是一個例子：

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

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

rem 單位如何轉(zhuǎn)換為像素值

當(dāng)使用 rem 單位，他們轉(zhuǎn)化為像素大小取決于頁根元素的字體大小，即 html 元素的字體大小。

html {font-size: 16px; }

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

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

px 與 rem 的選擇？

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

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

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 是相對于視口的高度和寬度兩者之間的最小值或最大值

%(百分比)

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

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 設(shè)置的最小字體大小為 12px，也就是說低于 12px的字體大小會被默認(rèn)為 12px。

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

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

rem

rem 是全部的長度都相對于根元素 html。通常做法是給 html 元素設(shè)置一個字體大小，然后其他元素的長度單位就為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; }

總結(jié)

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。