許多網站都在使用難以在越來越多的不同設備中調整的像素單元，CSS3引入了一些新的單位，包括REM單位，它代表“root em”，這篇文章給大家分享的內容是關於REM的使用。
那麼，我們要如何使用REM？
假設我們有這個CSS：
CSS
article h2 {font-size:20px;}
article p {font-size:12px;}首先，我們需要確定相對於所有字體的px大小。為了方便起見，我所做的最好的做法是使root font-size 1px像這樣：
CSS
html {font-size:1px;}其次，我們需要將其餘的字體大小值從像素替換為rem單位。
CSS
article h2 {font-size:20rem;}
article p {font-size:12rem;}REM做什麼，需要20REM並將其與根元素相乘：
20 REM * 1 PX = 20PX.
瀏覽器支援
#IE7和IE8仍然需要使用PX值。這將迫使我們兩次寫入字體大小，一次在PX中，第二次使用REM。
CSS
article h2 {font-size:20px; font-size:20rem;}
article p {font-size:12px; font-size:12rem;}範例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
html{font-size:1px;}
article h2{
font-size:20px;/*Support IE7 & IE8*/
font-size:20rem;
}
article p{
font-size:12px;/*Support IE7 & IE8*/
font-size:12rem;
}
</style>
</head>
<body>
<section>
<article>
<h2>php中文网</h2>
<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
</article>
<article>
<h2>php中文网1</h2>
<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
</article>
<article>
<h2>php中文网2</h2>
<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
</article>
</section>
</body>
</html>效果如下：
##REM有什麼優點？
讓我們假設我們需要將網站中的所有字體放大20％，我們所要做的就是更改根元素中字體大小的大小，如下所示：html {font-size:1.2px;}html{font-size:0.8px;}REM用於響應式設計
如果要根據響應式設計中的斷點更改所有字體大小，則更容易。看例子：@media (min-width: 320px){
html{
font-size:1.4px;
}}
@media (min-width: 600px){
html{
font-size:1.2px;
}}使用less來解決兩次寫入內容的需求- 用於支援舊瀏覽器
在less或sass中你可以添加函數來節省你寫兩次的所有時間。 可以使用less - font-size函數並呼叫它.font-size(@font-size) {
font-size : @font-size * 1px;
font-size : @font-size * 1rem;
}
article h2 {
.font-size(20);
}article h2{
font-size:20px;
/*Support IE7 & IE8*/
font-size:20rem;
}以上是CSS3中REM單位的用法詳解（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
