CSS3的REM設(shè)置字體大小

WindySky 2016-12-01

展開全文

在Web中使用什么單位來定義頁面的字體大小,，至今天為止都還在激烈的爭論著,，有人說PX做為單位好,，有人說EM優(yōu)點多,，還有人在說百分比方便,，以至于出現(xiàn)了CSS Font-Size: em vs. px vs. pt vs. percent這樣的PK大局,。不幸的是,，仍然有不同的利弊，使各種技術(shù)都不太理想,，但又無法不去用,。真是進也難，退也難呀,。

最近在學習em的相關(guān)知識的時候,，無意之間讓我拾得一寶，就是使用rem來設(shè)置Web頁面的字體大小,。讓我一下子就來勁了,，一口氣看完并測試了一回，還真是爽歪歪的呀,。師傅說好東西不能吃獨食,，于我就在這里給大家吹吹這個從沒見過的REM,。

在詳細介紹rem之前，我們先一起來回顧一下我們常用的兩種記量單位,，也是備受爭論的兩個：

PX為單位
EM為單位

PX為單位

在Web頁面初期制作中,，我們都是使用“px”來設(shè)置我們的文本，因為他比較穩(wěn)定和精確,。但是這種方法存在一個問題,，當用戶在瀏覽器中瀏覽我們制作的Web頁面時，他改變了瀏覽器的字體大小,，這時會使用我們的Web頁面布局被打破,。這樣對于那些關(guān)心自己網(wǎng)站可用性的用戶來說，就是一個大問題了,。因此,，這時就提出了使用“em”來定義Web頁面的字體。

em為單位

前面也說了,，使用是“px”為單位是比較方便,，而又一致，但在瀏覽器中放大或縮放瀏覽頁面時會存在一個問題,，要解決這個問題,，我們可以使用“em”單位。Richard Rutter'在《How to size text using ems》一文中有做過詳細的介紹,，追至早一點,，Richard Rutter也在《How to Size Text in CSS》中進行過深入的剖析。

這種技術(shù)需要一個參考點,，一般都是以<body>的“font-size”為基準,。比如說我們使用“1em”等于“10px”來改變默認值“1em=16px”，這樣一來,，我們設(shè)置字體大小相當于“14px”時,，只需要將其值設(shè)置為“1.4em”。

[css] view plain copy

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 ? */
}

為什么“l(fā)i”的“1.4em”是不是“14px”將是一個問號呢,？如果你了解過“em”后，你會覺得這個問題是多問的,。前面也簡單的介紹過一回,，在使用“em”作單位時，一定需要知道其父元素的設(shè)置,，因為“em”就是一個相對值,，而且是一個相對于父元素的值，其真正的計算公式是：

1 ÷ 父元素的font-size × 需要轉(zhuǎn)換的像素值 = em值

這樣的情況下“1.4em”可以是“14px”,也可以是“20px”,，或者說是“24px”,，總之是一個不確定值,，那么解決這樣的問題，要么你知道其父元素的值,，要么呢在任何子元素中都使用“1em”,。這樣一來可能又不是我們所需要的方法。

這里我只是簡單的介紹了一個這兩個單位的使用,，具體一點的大家可以參閱：

Rem為單位

CSS3的出現(xiàn),，他同時引進了一些新的單位，包括我們今天所說的rem,。在W3C官網(wǎng)上是這樣描述rem的——“font size of the root element” ,。下面我們就一起來詳細的了解rem。

前面說了“em”是相對于其父元素來設(shè)置字體大小的,，這樣就會存在一個問題,，進行任何元素設(shè)置，都有可能需要知道他父元素的大小,，在我們多次使用時,，就會帶來無法預(yù)知的錯誤風險。而rem是相對于根元素<html>,，這樣就意味著,，我們只需要在根元素確定一個參考值，,，在根元素中設(shè)置多大的字體,，這完全可以根據(jù)您自己的需，大家也可以參考下圖：

我們來看一個簡單的代碼實例：

[css] view plain copy

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>中定義了一個基本字體大小為62.5%（也就是10px。設(shè)置這個值主要方便計算,，如果沒有設(shè)置,，將是以“16px”為基準）。從上面的計算結(jié)果,，我們使用“rem”就像使用“px”一樣的方便，而且同時解決了“px”和“em”兩者不同之處,。

瀏覽器的兼容性

rem是CSS3新引進來的一個度量單位,，大家心里肯定會覺得心灰意冷呀，擔心瀏覽器的支持情況,。其實大家不用害怕,，你可能會驚訝，支持的瀏覽器還是蠻多的,，比如：Mozilla Firefox 3.6+,、Apple Safari 5+、Google Chrome、IE9+和Opera11+,。只是可憐的IE6-8無法,，你們就把他們當透明了吧，我向來都是如此,。

不過使用單位設(shè)置字體,，可不能完全不考慮IE了，如果你想使用這個REM,，但也想兼容IE下的效果,，可你可考慮“px”和“rem”一起使用，用"px"來實現(xiàn)IE6-8下的效果,，然后使用“Rem”來實現(xiàn)代瀏覽器的效果,。就讓IE6-8不能隨文字的改變而改變吧，誰讓這個Ie6-8這么老呢,？哈,。。,。,。大家不仿試試，還蠻有意思,，說不定這個就是主流的度量單位了,。

from:http://www./CSS3/define-font-size-with-css3-rem