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