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