CSS中px、em、rem、%、vw、vh單位之間的區別是什么

這篇文章將為大家詳細講解有關CSS中px、em、rem、%、vw、vh單位之間的區別是什么，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

1 、px

px就是pixel（像素）的縮寫，相對長度單位，相對于屏幕分辨率。

2、em

參考物是父元素的font-size，具有繼承的特點。瀏覽器默認字體是16px，整個頁面內1em不是一個固定的值。

字體大小同樣都是1.5em，但是效果卻截然不同，按照W3C提供的公式，我們可以計算下： class為id1的div字體大小繼承自父元素body：16px*1.5em = 24px class為id2的div字體大小繼承自父元素id1：24px*1.5em = 36px class為id3的div字體大小繼承自父元素id2：36px*1.5em = 54px

3、rem

rem是CSS3新增的一個相對單位，但相對的只是HTML根元素。通過它既可以做到只修改根元素就成比例地調整所有字體大小，又可以避免字體大小逐層復合的連鎖反應。

4、%

% 百分比，相對長度單位，相對于父元素的百分比值

元素寬高與字體大小使用區別：

（1）盡量使用相對尺寸單位

使用相對尺寸單位計量，則在調整頁面的布局的時候，不需要遍歷所有的內部DOM結構，重新設置內部子元素的尺寸大小。如果是隨著父容器或者是整體頁面布局而改變尺寸，則使用%更好，如元素的高度和寬度設置。

（2）字體尺寸盡量使用em、rem

為了字體大小的可維護性和伸縮性，推薦使用em，如果存在3層以及3層以上的字體相對尺寸的設置，可以考慮使用rem。

5、vw和vh

vm、vh、vmin、vmax是一種視窗單位，也是相對單位。它相對的不是父節點或者頁面的根節點。而是由視窗（Viewport）大小來決定的，單位 1，代表類似于 1%。 視窗(Viewport)是你的瀏覽器實際顯示內容的區域—，換句話說是你的不包括工具欄和按鈕的網頁瀏覽器。

具體描述如下：

vw：視窗寬度的百分比（1vw 代表視窗的寬度為 1%）
vh：視窗高度的百分比
vmin：取當前Vw和Vh中較小的那一個值
vmax：取當前Vw和Vh中較大的那一個值

vh和vw相對于視口的高度和寬度， 1vh 等于1/100的視口高度，1vw 等于1/100的視口寬度 比如：瀏覽器高度900px，寬度為750px, 1 vh = 900px/100 = 9 px，1vw = 750px/100 = 7.5 px， 很容易實現與同屏幕等高的框。

calc + vm 計算寬度

width: 800px; 
width: -moz-calc(100vm - (2 * 10)px);
width: -webkit-calc(100vm -(2 * 10)px);
width: calc(100vm - (2 * 10)px);

關于“CSS中px、em、rem、%、vw、vh單位之間的區別是什么”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。