上一篇文章如何做好移動(dòng)端的響應式設計：Viewport控制討論到了CSS像素，于是我決定研究一下如何用不同的方式來(lái)在CSS中設定字體大小。
在CSS中可以用很多不同的方式來(lái)設定字體的尺寸。一般來(lái)說(shuō)，這些單位被分成兩大類(lèi)：絕對單位(absolute)和相對單位(relative)。
絕對單位在大多數情況下是相對于某些實(shí)際量度而言的固定值，即是說(shuō)它們一旦設定，就不會(huì )因為其他元素的字體尺寸變化而變化。
相對單位沒(méi)有一個(gè)固定的度量值，而是由父元素尺寸來(lái)決定的相對值，它們的尺寸會(huì )根據與其相關(guān)的元素改變而改變。
下面是對這些單位的一個(gè)簡(jiǎn)單整理：
| 單位 | 類(lèi)型 | 描述 |
|---|---|---|
| px | Absolute | 1個(gè)Viewport像素 |
| pt | Absolute | 1pt = 1/72英寸 |
| pc | Absolute | 1pc = 12pt |
| % | Relative | 相對于父元素的字體尺寸 |
| em | Relative | 相對于父元素的字體尺寸 |
| rem | Relative | (即root em) 相對于html標簽的字體尺寸 |
| keyword | Relative | xx-small, x-small, small, medium, large, x-large, xx-large |
| vw | Relative | 相當于Viewport寬度的1/100 |
| vh | Relative | 相當于Viewport高度的1/100 |
| vmin | Relative | 相當于Viewport高寬中長(cháng)度相對較小的1/100 |
| vmax | Relative | 相當于Viewport高寬中長(cháng)度相對較大的1/100 |
這里主要關(guān)注這幾個(gè)單位：px、pt、%、em、rem和vw。
從概念上很難理解這些單位之間的差別，所以下面用一些實(shí)例來(lái)說(shuō)明。
當你不設定字體尺寸時(shí)，HTML會(huì )提供一個(gè)默認的尺寸設定。大多數瀏覽器中<html>和<body>標簽中的默認字體尺寸是100%，沒(méi)有概念？看這個(gè)等式：
100% = 1em = 1rem = 16px = 12pt
還是不懂？那就換個(gè)說(shuō)法，比如說(shuō)你給一個(gè)<p>設置字體尺寸為100%，給另一個(gè)<p>設置為16px，在屏幕上看到的這兩個(gè)<p>中的字體大小是一樣的，下圖列出了用幾個(gè)不同單位設置的字體尺寸，可以看出是一樣大的：
改變<html>的字體尺寸可以很明顯的看出絕對單位和相對單位的差別。如果把<html>設置為html { font-size: 200% }，就會(huì )影響所有使用相對單位的<p>。效果如下圖：
這就是相對單位最主要的優(yōu)勢了，借助相對單位的這種特性就可以設計出真正的響應式頁(yè)面，而所要做的只是修改<html>的字體尺寸
rem與em(或者%)em(或者%)需要通過(guò)父元素的字體尺寸來(lái)計算尺寸：
html { font-size: 100% /* =16px */}body { font-size: 2em; /* =32px */}p { font-size: 1em; /* =32px */ /* font-size: 0.5em; =16px */}因為<p>是<body>的子元素，而<body>是<html>的子元素，所以<p>中的em和%將是之前的兩倍。
當你為一個(gè)元素添加em單位時(shí)，應當考慮到所有父元素的字體尺寸。如你所見(jiàn)，這樣很容易使人混亂。
使用rem可以很好的解決這個(gè)問(wèn)題。rem只需要計算<html>的字體尺寸而不需要考慮父元素。如下代碼所示：
html { font-size: 100% /* =16px */}body { font-size: 2rem; /* =32px */}p { font-size: 1rem; /* =16px */}使用rem可以讓你擁有和em/%同樣的縮放能力，但不必去考慮那些復雜的嵌套關(guān)系。
vw是CSS3中新提出的一個(gè)單位，通過(guò)Viewport寬度來(lái)計算字體尺寸。這樣就可以設計出更加靈活的響應式字體。
雖然這個(gè)單位看上去非常適合用于響應式設計，但就我個(gè)人而言不是很熱衷于它。在使用vw的過(guò)程中我并不能很好的控制字體的大小，不是太大就是太小。
當我在寫(xiě)這篇文章時(shí)，我僅使用px來(lái)作為單位。因為現在大多數瀏覽器都允許用戶(hù)放大頁(yè)面，這樣做就不會(huì )有可訪(fǎng)問(wèn)性的問(wèn)題。
然而，我發(fā)現了這個(gè)具有一定限制力的方式。雖然我的字體尺寸在中小型屏幕上看起來(lái)還行，但在大屏幕上會(huì )被優(yōu)化的更好。盡管用戶(hù)可以自行設定放大的屬性，但是我們希望可以盡量減少用戶(hù)的工作。
我的解決方案是使用rem，并使用px作為備用單位。
html { font-size: 62.5%; /* sets the base font to 10px for easier math */}body { font-size: 16px; font-size: 1.6rem; /* sets the default sizing to make sure nothing is actually 10px */}h1 { font-size: 32px; font-size: 3.2rem;}像下面這樣寫(xiě)就可以允許我按比例來(lái)放大我的字體尺寸：
@media screen and (min-width: 1280px) { html { font-size: 100%; }}這個(gè)方案之所以使用px作為備用單位，是因為rem不支持IE8及其以下版本。這個(gè)方案有一個(gè)問(wèn)題，就是像上面這樣改變基礎字體尺寸時(shí)，并不能對備用字體尺寸起到作用。不過(guò)，我不覺(jué)得這個(gè)問(wèn)題多么大，因為這個(gè)匹配大型設備尺寸的能力只不過(guò)是為了錦上添花而已，并不是一個(gè)核心功能。
聯(lián)系客服
