一、介紹
傳統(tǒng)的項(xiàng)目開發(fā)中，我們只會(huì)用到px、%、em這幾個(gè)單位，它可以適用于大部分的項(xiàng)目開發(fā)，且擁有比較良好的兼容性

從CSS3開始，瀏覽器對(duì)計(jì)量單位的支持又提升到了另外一個(gè)境界，新增了rem、vh、vw、vm等一些新的計(jì)量單位

利用這些新的單位開發(fā)出比較良好的響應(yīng)式頁面，適應(yīng)多種不同分辨率的終端，包括移動(dòng)設(shè)備等

二、單位

在css單位中，可以分為長度單位、絕對(duì)單位，如下表所指示

這里我們主要講述px、em、rem、vh、vw

px
px，表示像素，所謂像素就是呈現(xiàn)在我們顯示器上的一個(gè)個(gè)小點(diǎn)，每個(gè)像素點(diǎn)都是大小等同的，所以像素為計(jì)量單位被分在了絕對(duì)長度單位中

有些人會(huì)把px認(rèn)為是相對(duì)長度，原因在于在移動(dòng)端中存在設(shè)備像素比，px實(shí)際顯示的大小是不確定的

這里之所以認(rèn)為px為絕對(duì)單位，在于px的大小和元素的其他屬性無關(guān)

em

em是相對(duì)長度單位。相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸。如當(dāng)前對(duì)行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對(duì)于瀏覽器的默認(rèn)字體尺寸（1em = 16px）

為了簡化 font-size 的換算，我們需要在css中的 body 選擇器中聲明font-size= 62.5%，這就使 em 值變?yōu)?16px*62.5% = 10px

這樣 12px = 1.2em, 10px = 1em, 也就是說只需要將你的原來的px 數(shù)值除以 10，然后換上 em作為單位就行了

特點(diǎn)：

• em 的值并不是固定的
• em 會(huì)繼承父級(jí)元素的字體大小
• em 是相對(duì)長度單位。相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸。如當(dāng)前對(duì)行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對(duì)于瀏覽器的默認(rèn)字體尺寸
• 任意瀏覽器的默認(rèn)字體高都是 16px

舉個(gè)粟子

<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>

這時(shí)候.big元素的font-size為14px，而.small元素的font-size為12px

rem
rem，相對(duì)單位，相對(duì)的只是HTML根元素font-size的值

同理，如果想要簡化font-size的轉(zhuǎn)化，我們可以在根元素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;使得視覺、使用、書寫都得到了極大的幫助

特點(diǎn)：

• rem單位可謂集相對(duì)大小和絕對(duì)大小的優(yōu)點(diǎn)于一身
• 和em不同的是rem總是相對(duì)于根元素，而不像em一樣使用級(jí)聯(lián)的方式來計(jì)算尺寸

vh、vw

vw ，就是根據(jù)窗口的寬度，分成100等份，100vw就表示滿寬，50vw就表示一半寬。（vw 始終是針對(duì)窗口的寬），同理，vh則為窗口的高度

這里的窗口分成幾種情況：

• 在桌面端，指的是瀏覽器的可視區(qū)域
• 移動(dòng)端指的就是布局視口

像vw、vh，比較容易混淆的一個(gè)單位是%，不過百分比寬泛的講是相對(duì)于父元素：

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

%
% 百分比，相對(duì)長度單位，相對(duì)于父元素的百分比值，使用時(shí)必須從根容器就設(shè)置好百分比
元素寬高與字體大小使用區(qū)別：

• （1）盡量使用相對(duì)尺寸單位
• 使用相對(duì)尺寸單位計(jì)量，則在調(diào)整頁面的布局的時(shí)候，不需要遍歷所有的內(nèi)部DOM結(jié)構(gòu)，重新設(shè)置內(nèi)部子元素的尺寸大小。如果是隨著父容器或者是整體頁面布局而改變尺寸，則使用%更好，如元素的高度和寬度設(shè)置。
• （2）字體尺寸盡量使用em、rem
• 為了字體大小的可維護(hù)性和伸縮性，推薦使用em，如果存在3層以及3層以上的字體相對(duì)尺寸的設(shè)置，可以考慮使用rem。

三、總結(jié)文章來源地址http://www.zghlxwxcb.cn/news/detail-488111.html

• 「px」：絕對(duì)單位，頁面按精確像素展示
• 「em」：相對(duì)單位，基準(zhǔn)點(diǎn)為父節(jié)點(diǎn)字體的大小，如果自身定義了font-size按自身來計(jì)算，整個(gè)頁面內(nèi)1em不是一個(gè)固定的值
• 「rem」：相對(duì)單位，可理解為root em, 相對(duì)根節(jié)點(diǎn)html的字體大小來計(jì)算
• 「vh、vw」：主要用于頁面視口大小布局，在頁面布局上更加方便簡單

到了這里，關(guān)于css基礎(chǔ)知識(shí)三：說說em/px/rem/vh/vw的區(qū)別?的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！