CSS中尺寸以及字體單位（em、px、%）介紹

然而在CSS中，W3C文檔把尺寸單位劃為為兩類：相對(duì)長(zhǎng)度單位和絕對(duì)長(zhǎng)度單位。然而相對(duì)長(zhǎng)度單位按照不同的參考元素，又可以分為字體相對(duì)單位和視窗相對(duì)單位。字體相對(duì)單位有：em、ex、ch、rem；視窗相對(duì)單位則包含：vw、vh、vmin、vmax幾種。絕對(duì)定位則是固定尺寸，它們采用的是物理度量單位：cm、mm、in、px、pt以及pc。但在實(shí)際應(yīng)用中，我們使用最廣泛的則是em、rem、px以及百分比（%）來(lái)度量頁(yè)面元素的尺寸。

1. px：為像素單位。它是顯示屏上顯示的每一個(gè)小點(diǎn)，為顯示的最小單位。它是一個(gè)絕對(duì)尺寸單位；

2. em：它是描述相對(duì)于應(yīng)用在當(dāng)前元素的字體尺寸，所以它也是相對(duì)長(zhǎng)度單位。一般瀏覽器字體大小默認(rèn)為16px，則2em == 32px；

3. %： 百分比，它是一個(gè)更純粹的相對(duì)長(zhǎng)度單位。它描述的是相對(duì)于父元素的百分比值。如50%，則為父元素的一半。

這里需要注意的是：em是相對(duì)于應(yīng)用于當(dāng)前當(dāng)前元素的字體尺寸；而百分比則是相對(duì)于父元素的尺寸。如下面示例：

HTML：

<p class="parent">
 <p class="em-demo">
 設(shè)置長(zhǎng)度為5em demo
 </p>

 <p class="percentage-demo">
 設(shè)置長(zhǎng)度為80% demo
 </p>
</p>

CSS：

p{
 border: 1px dashed #808080;
 margin:10px
}

.parent{
 width: 200px;
 font-size: 18px;
}

.em-demo{
 width: 5em;
}

.percentage-demo{
 width: 80%
}

從圖上我們可以看出：設(shè)置5em的p的第一行字符剛好為5個(gè)字符大小，因?yàn)槿缟纤f(shuō)，它是相對(duì)于當(dāng)前元素字體的尺寸， 5 * 18 = 90px。而百分比顯示則會(huì)比較大一些，因?yàn)樗窍鄬?duì)于父元素的尺寸比例， 200 * 80% = 160px。

對(duì)于px、em和百分比都能設(shè)置元素的尺寸和字體大小，但是它們各自有自己所不同的應(yīng)用場(chǎng)景。不合理的運(yùn)用，則會(huì)導(dǎo)致頁(yè)面的混亂、難易維護(hù)和擴(kuò)展。對(duì)于它們的使用，有如下幾點(diǎn)被大家所認(rèn)同的最佳實(shí)踐：

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

使用相對(duì)尺寸單位計(jì)量，則在調(diào)整頁(yè)面的布局的時(shí)候，不需要遍歷所有的內(nèi)部DOM結(jié)構(gòu)，重新設(shè)置內(nèi)部子元素的尺寸大小，同時(shí)它也能更好的適應(yīng)與多中分辨率和屏幕終端。采用相對(duì)定位，并不意味著頁(yè)面整體的自適應(yīng)。

當(dāng)然，對(duì)于希望整體網(wǎng)站的“響應(yīng)式設(shè)計(jì)”，適應(yīng)當(dāng)今層出不窮的的各類訪問(wèn)終端，相對(duì)尺寸布局將發(fā)揮更大的價(jià)值。我們僅需要利用CSS3的@media查詢來(lái)設(shè)置外圍的整體寬度，以及少量在設(shè)備上不一致的用戶體驗(yàn)。關(guān)于“響應(yīng)式布局”，可以更多的參考bootstrap這類新興的CSS框架。

對(duì)于相對(duì)尺寸單位的設(shè)置：em和%因?yàn)樗鼈兿鄬?duì)的參考物不同，所以它們也有不同的使用場(chǎng)景。如果希望隨著當(dāng)前元素的字體尺寸而改變尺寸，則使用em最佳，如：行高、字體大小。相反，如果是隨著父容器或者是整體頁(yè)面布局而改變尺寸，則使用%更好，如元素的高度和寬度設(shè)置。

2. 只在可預(yù)知的元素上使用絕對(duì)尺寸

并不是所有的元素設(shè)置相對(duì)尺寸就是最佳的。對(duì)于如圖表icon、如video這類多媒體元素、網(wǎng)頁(yè)整體的寬度這類可預(yù)知尺寸，設(shè)置為絕對(duì)路徑可能反而是最佳的選擇。但他們需要試具體場(chǎng)景而定，從而獲得最佳體驗(yàn)。不管我們?nèi)绱嗽O(shè)置相對(duì)尺寸，但在外層也總會(huì)有一些絕對(duì)尺寸度量，才可能存在百分比這類相對(duì)尺寸設(shè)置。

3. 字體尺寸盡量使用em、rem

和盡量使用相對(duì)尺寸單位一樣，為了字體大小的可維護(hù)性和伸縮性，W3C更推薦使用em作為字體尺寸單位。需要注意的是，如果存在3層以及3層以上的字體相對(duì)尺寸的設(shè)置，則對(duì)于實(shí)際字體大小的計(jì)算，就會(huì)變得相對(duì)麻煩。這個(gè)時(shí)候，在滿足瀏覽器兼容性的情況下，可以考慮使用CSS3的新特性rem：根據(jù)固定根元素的字體大小來(lái)設(shè)置相對(duì)尺寸大小，這也是近幾年移動(dòng)APP所興起的使用方式。

rem的兼容性，我們可以用Can I Use網(wǎng)站獲取。

4. @media查詢做平臺(tái)適配，但禁止隨處濫用

如上所說(shuō)CSS3的@media查詢，能幫助我們做到多平臺(tái)終端的自適應(yīng)布局，得到一個(gè)更好的用戶體驗(yàn)。但這絕不意味著我們可以隨處濫用它，在CSS代碼中存在太多的平臺(tái)差異的代碼，這也會(huì)增加代碼可讀性、維護(hù)性的難度。更好的方式則是僅在必須使用它的場(chǎng)景下，合理的使用它，如頁(yè)面外圍的整體寬度，不同顯示的菜單欄等。更多的體驗(yàn)適應(yīng)性，可以移動(dòng)到使用“流式布局”來(lái)實(shí)現(xiàn)。

關(guān)于響應(yīng)式設(shè)計(jì)，這是對(duì)開(kāi)發(fā)周期、成本和平臺(tái)體驗(yàn)的一個(gè)權(quán)衡的結(jié)果。如果不考慮開(kāi)發(fā)、維護(hù)的成本，則為不同平臺(tái)終端提供不同的頁(yè)面設(shè)計(jì)，這樣得到的用戶體驗(yàn)會(huì)更友好。但在實(shí)際開(kāi)發(fā)中，開(kāi)發(fā)和維護(hù)成本、產(chǎn)品生命周期也是一個(gè)重要的權(quán)衡標(biāo)準(zhǔn)，而響應(yīng)式設(shè)計(jì)則是它們之間的權(quán)衡結(jié)果。

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com