詳解CSS3 rem(設(shè)置字體大小) 教程
我要評(píng)論css3新增了相對(duì)單位 rem ,使用rem同em一樣皆為相對(duì)字體大小單位，不同的是rem相對(duì)的是HTML根元素。鑒于很多網(wǎng)友提到了rem，所以我這里就對(duì)其中一個(gè)總結(jié)。
在Web中使用什么單位來(lái)定義頁(yè)面的字體大小，至今天為止都還在激烈的爭(zhēng)論著，有人說(shuō)PX做為單位好，有人說(shuō)EM優(yōu)點(diǎn)多，還有人在說(shuō)百分比方便，以至于出現(xiàn)了CSS Font-Size: em vs. px vs. pt vs. percent這樣的PK大局。不幸的是，仍然有不同的利弊，使各種技術(shù)都不太理想，但又無(wú)法不去用。
在詳細(xì)介紹rem之前，我們先一起來(lái)回顧一下我們常用的兩種記量單位，也是備受爭(zhēng)論的兩個(gè)：
- PX為單位
- EM為單位
px為單位
在Web頁(yè)面初期制作中，我們都是使用“px”來(lái)設(shè)置我們的文本，因?yàn)樗容^穩(wěn)定和精確。但是這種方法存在一個(gè)問(wèn)題，當(dāng)用戶在瀏覽器中瀏覽我們制作的Web頁(yè)面時(shí)，他改變了瀏覽器的字體大小，這時(shí)會(huì)使用我們的Web頁(yè)面布局被打破。這樣對(duì)于那些關(guān)心自己網(wǎng)站可用性的用戶來(lái)說(shuō)，就是一個(gè)大問(wèn)題了。因此，這時(shí)就提出了使用“em”來(lái)定義Web頁(yè)面的字體。
em為單位
前面也說(shuō)了，使用是“px”為單位是比較方便，而又一致，但在瀏覽器中放大或縮放瀏覽頁(yè)面時(shí)會(huì)存在一個(gè)問(wèn)題，要解決這個(gè)問(wèn)題，我們可以使用“em”單位。
這種技術(shù)需要一個(gè)參考點(diǎn)，一般都是以<body>的“font-size”為基準(zhǔn)。比如說(shuō)我們使用“1em”等于“10px”來(lái)改變默認(rèn)值“1em=16px”，這樣一來(lái)，我們?cè)O(shè)置字體大小相當(dāng)于“14px”時(shí)，只需要將其值設(shè)置為“1.4em”。
body {
font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/
}
h1 {
font-size: 2.4em; /*2.4em × 10 = 24px */
}
p {
font-size: 1.4em; /*1.4em × 10 = 14px */
}
li {
font-size: 1.4em; /*1.4 × ? = 14px ? */
}
為什么“li”的“1.4em”是不是“14px”將是一個(gè)問(wèn)號(hào)呢？如果你了解過(guò)“em”后，你會(huì)覺(jué)得這個(gè)問(wèn)題是多問(wèn)的。前面也簡(jiǎn)單的介紹過(guò)一回，在使用“em”作單位時(shí)，一定需要知道其父元素的設(shè)置，因?yàn)?ldquo;em”就是一個(gè)相對(duì)值，而且是一個(gè)相對(duì)于父元素的值，其真正的計(jì)算公式是：
1 ÷ 父元素的font-size × 需要轉(zhuǎn)換的像素值 = em值
這樣的情況下“1.4em”可以是“14px”,也可以是“20px”，或者說(shuō)是“24px”，總之是一個(gè)不確定值，那么解決這樣的問(wèn)題，要么你知道其父元素的值，要么呢在任何子元素中都使用“1em”。這樣一來(lái)可能又不是我們所需要的方法。
rem為單位
CSS3的出現(xiàn)，他同時(shí)引進(jìn)了一些新的單位，包括我們今天所說(shuō)的rem。在W3C官網(wǎng)上是這樣描述rem的——“font size of the root element” 。下面我們就一起來(lái)詳細(xì)的了解rem。
前面說(shuō)了“em”是相對(duì)于其父元素來(lái)設(shè)置字體大小的，這樣就會(huì)存在一個(gè)問(wèn)題，進(jìn)行任何元素設(shè)置，都有可能需要知道他父元素的大小，在我們多次使用時(shí)，就會(huì)帶來(lái)無(wú)法預(yù)知的錯(cuò)誤風(fēng)險(xiǎn)。而rem是相對(duì)于根元素<html>，這樣就意味著，我們只需要在根元素確定一個(gè)參考值，，在根元素中設(shè)置多大的字體，這完全可以根據(jù)您自己的需，大家也可以參考下圖：
下面再來(lái)看一個(gè)簡(jiǎn)單的實(shí)例：
html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}
我在根元素<html>中定義了一個(gè)基本字體大小為62.5%（也就是10px。設(shè)置這個(gè)值主要方便計(jì)算，如果沒(méi)有設(shè)置，將是以“16px”為基準(zhǔn) ）。從上面的計(jì)算結(jié)果，我們使用“rem”就像使用“px”一樣的方便，而且同時(shí)解決了“px”和“em”兩者不同之處。
瀏覽器的兼容性
rem是CSS3新引進(jìn)來(lái)的一個(gè)度量單位，大家心里肯定會(huì)覺(jué)得心灰意冷呀，擔(dān)心瀏覽器的支持情況。其實(shí)大家不用害怕，你可能會(huì)驚訝，支持的瀏覽器還是蠻多的，比如：Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+。只是可憐的IE6-8無(wú)法，你們就把他們當(dāng)透明了吧，我向來(lái)都是如此。
不過(guò)使用單位設(shè)置字體，可不能完全不考慮IE了，如果你想使用這個(gè)REM，但也想兼容IE下的效果，可你可考慮“px”和“rem”一起使用，用"px"來(lái)實(shí)現(xiàn)IE6-8下的效果，然后使用“Rem”來(lái)實(shí)現(xiàn)代瀏覽器的效果。就讓IE6-8不能隨文字的改變而改變吧，誰(shuí)讓這個(gè)Ie6-8這么老呢！
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
- rem是css3新定義的設(shè)置字體大小屬性,rem大小都是以html的字體大小設(shè)置為參考值進(jìn)行一個(gè)字體大小縮放,下面就帶大家來(lái)輕松掌握CSS3中的字體大小單位rem的使用方法:2016-05-24