Rem為單位

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

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

我們來看一個簡單的程式碼例項：

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

我在根元素中定義了一個基本字型大小為62.5%（也就是10px。設定這個值主要方便計算，如果沒有設定，將是以“16px”為基準 ）。從上面的計算結果，我們使用“rem”就像使用“px”一樣的方便，而且同時解決了“px”和“em”兩者不同之處。

瀏覽器的相容性

rem是CSS3新引進來的一個度量單位，大家心裡肯定會覺得心灰意冷呀，擔心瀏覽器的支援情況。其實大家不用害怕，你可能會驚訝，支援的瀏覽器還是蠻多的，比如：Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+

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

問題又來了，如何根據裝置尺寸來設定基準值？

有兩個方法，通過css media query 和js新增基準值：

css media query:

@media (min
 
-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){
      html{font-size: 37.5px;}
}

用media query來實現難覆蓋到所有裝置：

html {
    font-size : 20px;
}
@media only screen and (min-width: 401px){
    html {
        font-size: 25px !important;
    }
}
/*這段是隻(only)針對彩色螢幕裝置*/

@media only screen and (min-width: 428px){
    html {
        font-size: 26.75px !important;
    }
}
@media only screen and (min-width: 481px){
    html {
        font-size: 30px !important; 
    }
}
@media only screen and (min-width: 569px){
    html {
        font-size: 35px !important; 
    }
}
@media only screen and (min-width: 641px){
    html {
        font-size: 40px !important; 
    }
}

而通過js來設定，可以實現覆蓋所有裝置：

js來設定

document.getElementsByTagName('html')[0].style.fontSize = window.innerWidth / 10 + 'px';

關於方案的利弊，其實上面的例子裡面可以看出，rem為整數的時候，基準值為32px，36px這樣的整數，換成px也是整數。但rem帶有小數，比如1.75rem，在32px的基準只下計算得56px。那再看看其他機型的換算值：

於方案的利弊，其實上面的例子裡面可以看出，rem為整數的時候，基準值為32px，36px這樣的整數，換成px也是整數。但rem帶有小數，比如1.75rem，在32px的基準只下計算得56px。那再看看其他機型的換算值：

可以看出，有些機型裡面是有小數畫素值的。小數畫素可能會帶來一定的誤差，設計的同事畫素眼很容易覺察到的。

在可以接受的情況下允許這些誤差存在。在安卓機子上較多出現這類情況。

使用rem的注意事項：

1.必須設定基本字型大小
2.有些機型裡面是有小數畫素值的。小數畫素可能會帶來一定的誤差
3.到這裡，可以假設：瀏覽器所做的渲染處理只是作用在元素的渲染尺寸上，但他們的真實尺寸仍是原始尺寸大小。