rem是CSS3里的一種尺寸單位，根據根頁面（html）標簽的字號匹配大小。比如：<html>的字號font-size:20px,那么CSS設定1rem的頁面元素實際上會顯示20px的大小，即1rem=<html>標簽上設置的字號大小，那么1.2rem就會顯示為24px的大小。與em的用法有些類似，但rem只認<html>標簽的字號。
rem的強大之處是不僅可以作為字號的尺寸單位，還可以用於其他地方，這項規則同樣適用width、margin、padding及radius等可以設置大小尺寸的地方。這樣，如果整個頁面的容器元素尺寸都是以rem為單位，我們只需要根據當前瀏覽器分辨率動態的設置根目錄的字號尺寸，頁面就可以自動地去適應分辨率了。
但，html的font-size應該如何設置呢，在不同的分辨率或者屏幕大小下，我們應該將該值設置為多少呢？解決這個問題，首先是需要一個參照的，這個參照就是設計稿，一般而言，設計師在輸出設計稿時會用px做尺寸單位，那么同時需要說明，該設計稿是在多大的屏幕下的設計稿，且該屏幕下標准的文字大小是多少。以最常見的640像素寬度的移動端頁面設計稿為例：稿子上有一個12px的標准文字，該文字是在該像素寬度屏幕下的標准通用文字大小，這時，我們可以把頁面里<html>標簽的字號設置成font-size:120px,那么12px的文字字號是1rem,然后根據頁面當前的寬度動態地縮放這個根目錄的字號，就可以達到文字和容器自適應的目的了。
我們可以使用一小段javascript來實現該功能：
（function(){ var html = document.documentElement; function setFont() { var cliWidth = html.clientWidth; html.style.fontSize = 12*(cliWidth/640)+'px'; } setFont(); window.onresize = function(){ setFont(); } })();
注意：應避免將基礎像素設置為小於12px的值，因為在小分辨率下容易導致頁面的rem倍數錯亂。
當完成了這一步，就可以把頁面中的所有尺寸都以rem為單位去寫，頁面中的所有元素就可以根據瀏覽器分辨率自動地按比例去適應了。