CSS3中的rem單位是相對于根元素的字體大小而言的單位。
當我們規定主體字號10px時，
html{ font-size:10px; }
那么設定寬度20px時，
p{ width: 2rem; }
其實質是p元素的寬度為20px/10px×2=40px，在瀏覽器中以10px為單位的等比放大。

對于pc端頁面的設計，我們通常采用px作為單位。但rem與其他單位不同的地方在于它的彈性特征，使得頁面按比例等比縮放，解決了不同屏幕、不同分辨率下，字體大小比例失調的問題。
例如，在pc端我們設計一個768px的寬度，rem可以使得布局在不同尺寸的屏幕中呈現相同的效果，如下所示：

/*根據窗口大小改變根字號，字體size也隨之變化*/  
html{  
font-size: 16px;  
}  
@media screen and (min-width: 960px){  
html{  
font-size: 20px;  
}  
}  
@media screen and (min-width: 1200px){  
html{  
font-size: 24px;  
}  
}

我們可以發現，通過媒體查詢@media可以依據不同的分辨率設計不同的根字號從而適應不同的設備尺寸，這也是rem在響應式布局中的重要應用。
同時，rem的使用可以大大增加網站的可訪問性，適應視力差異，提高用戶體驗。