css3新增了相對單位 rem ,使用rem同em一樣皆為相對字體大小單位，不同的是rem相對的是HTML根元素。鑒于很多網友提到了rem，所以我這里就對其中一個總結。
在Web中使用什么單位來定義頁面的字體大小，至今天為止都還在激烈的爭論著，有人說PX做為單位好，有人說EM優點多，還有人在說百分比方便，以至于出現了CSS Font-Size: em vs. px vs. pt vs. percent這樣的PK大局。不幸的是，仍然有不同的利弊，使各種技術都不太理想，但又無法不去用。
在詳細介紹rem之前，我們先一起來回顧一下我們常用的兩種記量單位，也是備受爭論的兩個：
- PX為單位
- EM為單位
px為單位
在Web頁面初期制作中，我們都是使用“px”來設置我們的文本，因為他比較穩定和精確。但是這種方法存在一個問題，當用戶在瀏覽器中瀏覽我們制作的Web頁面時，他改變了瀏覽器的字體大小，這時會使用我們的Web頁面布局被打破。這樣對于那些關心自己網站可用性的用戶來說，就是一個大問題了。因此，這時就提出了使用“em”來定義Web頁面的字體。
em為單位
前面也說了，使用是“px”為單位是比較方便，而又一致，但在瀏覽器中放大或縮放瀏覽頁面時會存在一個問題，要解決這個問題，我們可以使用“em”單位。
這種技術需要一個參考點，一般都是以<body>的“font-size”為基準。比如說我們使用“1em”等于“10px”來改變默認值“1em=16px”，這樣一來，我們設置字體大小相當于“14px”時，只需要將其值設置為“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”將是一個問號呢？如果你了解過“em”后，你會覺得這個問題是多問的。前面也簡單的介紹過一回，在使用“em”作單位時，一定需要知道其父元素的設置，因為“em”就是一個相對值，而且是一個相對于父元素的值，其真正的計算公式是：
1 ÷ 父元素的font-size × 需要轉換的像素值 = em值
這樣的情況下“1.4em”可以是“14px”,也可以是“20px”，或者說是“24px”，總之是一個不確定值，那么解決這樣的問題，要么你知道其父元素的值，要么呢在任何子元素中都使用“1em”。這樣一來可能又不是我們所需要的方法。
rem為單位
CSS3的出現，他同時引進了一些新的單位，包括我們今天所說的rem。在W3C官網上是這樣描述rem的——“font size of the root element” 。下面我們就一起來詳細的了解rem。
前面說了“em”是相對于其父元素來設置字體大小的，這樣就會存在一個問題，進行任何元素設置，都有可能需要知道他父元素的大小，在我們多次使用時，就會帶來無法預知的錯誤風險。而rem是相對于根元素<html>，這樣就意味著，我們只需要在根元素確定一個參考值，，在根元素中設置多大的字體，這完全可以根據您自己的需，大家也可以參考下圖：
下面再來看一個簡單的實例：
html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*
【網站聲明】本站除付費源碼經過測試外，其他素材未做測試，不保證完整性，網站上部分源碼僅限學習交流，請勿用于商業用途。如損害你的權益請聯系客服QQ：2655101040 給予處理，謝謝支持。