CSS3 的出現(xiàn)，他同時(shí)引進(jìn)了一些新的 單位 ，包括我們今天所說的 rem 。在 W3C 官網(wǎng)上是這樣描述 rem 的—— “font size of the root element”? 。下面我們就一起來詳細(xì)的了解 rem 。
前面說了“em”是相對(duì)于其父元素來設(shè)置字體大小的，這樣就會(huì)存在一個(gè)問題，進(jìn)行任何元素設(shè)置，都有可能需要知道他父元素的大小，在我們多次使用時(shí)，就會(huì)帶來無法預(yù)知的錯(cuò)誤風(fēng)險(xiǎn)。而 rem 是相對(duì)于根元素<html>，這樣就意味著，我們只需要在根元素確定一個(gè)參考值，，在根元素中設(shè)置多大的字體，這完全可以根據(jù)您自己的需，大家也可以參考下圖：
我們來看一個(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ì)算，如果沒有設(shè)置，將是以“16px”為基準(zhǔn) ）。從上面的計(jì)算結(jié)果，我們使用“rem”就像使用“px”一樣的方便，而且同時(shí)解決了“px”和“em”兩者不同之處。
瀏覽器的兼容性
rem 是 CSS3 新引進(jìn)來的一個(gè)度量單位，大家心里肯定會(huì)覺得心灰意冷呀，擔(dān)心瀏覽器的支持情況。其實(shí)大家不用害怕，你可能會(huì)驚訝，支持的瀏覽器還是蠻多的，比如： Mozilla Firefox 3.6+ 、 Apple Safari 5+ 、 Google Chrome 、 IE9+ 和 Opera11+ 。只是可憐的IE6-8無法，你們就把他們當(dāng)透明了吧，我向來都是如此。
不過使用單位設(shè)置字體，可不能完全不考慮IE了，如果你想使用這個(gè)REM，但也想兼容IE下的效果，可你可考慮“px”和“rem”一起使用，用"px"來實(shí)現(xiàn)IE6-8下的效果，然后使用“Rem”來實(shí)現(xiàn)代瀏覽器的效果。
轉(zhuǎn)自: http://www.w3cplus.com/css3/define-font-size-with-css3-rem
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫作最大的動(dòng)力，如果您喜歡我的文章，感覺我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
