1 、px

px就是pixel（像素）的縮寫，相對(duì)長(zhǎng)度單位，相對(duì)于屏幕分辨率。

2、em

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

字體大小同樣都是1.5em，但是效果卻截然不同，按照W3C提供的公式，我們可以計(jì)算下： 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新增的一個(gè)相對(duì)單位，但相對(duì)的只是HTML根元素。通過(guò)它既可以做到只修改根元素就成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)。

4、%

% 百分比，相對(duì)長(zhǎng)度單位，相對(duì)于父元素的百分比值

元素寬高與字體大小使用區(qū)別：

（1）盡量使用相對(duì)尺寸單位

使用相對(duì)尺寸單位計(jì)量，則在調(diào)整頁(yè)面的布局的時(shí)候，不需要遍歷所有的內(nèi)部DOM結(jié)構(gòu)，重新設(shè)置內(nèi)部子元素的尺寸大小。如果是隨著父容器或者是整體頁(yè)面布局而改變尺寸，則使用%更好，如元素的高度和寬度設(shè)置。

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

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

5、vw和vh

vm、vh、vmin、vmax是一種視窗單位，也是相對(duì)單位。它相對(duì)的不是父節(jié)點(diǎn)或者頁(yè)面的根節(jié)點(diǎn)。而是由視窗（Viewport）大小來(lái)決定的，單位 1，代表類似于 1%。 視窗(Viewport)是你的瀏覽器實(shí)際顯示內(nèi)容的區(qū)域—，換句話說(shuō)是你的不包括工具欄和按鈕的網(wǎng)頁(yè)瀏覽器。

具體描述如下：

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

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

calc + vm 計(jì)算寬度

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

總結(jié)

到此這篇關(guān)于CSS 中px、em、rem、%、vw、vh單位之間的區(qū)別詳解的文章就介紹到這了,更多相關(guān)px、em、rem、%、vw、vh單位區(qū)別內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評(píng)論