em 是相對於其父元素來設置字體大小的，這樣就會存在一個問題，進行任何元素設置，都有可能需要知道他父元素的大小，
在我們多次使用時，就會帶來無法預知的錯誤風險。
rem 是 CSS3 新增的一個相對單位（root em，根em），這個單位引起了廣泛關注。這個單位與em有什麼區別呢？區別在於使用rem爲元素設定字體大小時，仍然是相對大小，但相對的只是HTML根元素。這個單位可謂集相對大小和絕對大小的優點於一身，通過它既可以做到只修改根元素就成比例地調整所有字體大小，又可以避免字體大小逐層複合的連鎖反應。(摘自網上)
要讓文本里的字體大小隨窗口大小的變化而變化，那麼文本字體大小的單位我們用rem 設置，然後通過 js 來設置根元素的字體大小就可以了。
以下是代碼示例
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p{ font-size: 3rem; }
</style>
</head>
<body>
<p>這是 p</p>
</body>
<script type="text/javascript">
// 獲取 html 元素
var html = document.documentElement;
// 封裝一個函數
function fontS(){
// 獲取 html 的寬
var hW = html.offsetWidth;
// 計算字體大小，這裏是 html 寬的五十分之一
var hS = hW / 50;
// 給剛開始時的 html 設置字體大小
html.style.fontSize = hS + "px";
}
// 當窗口大小改變時執行函數
fontS()window.onresize = function(){fontS();}
</script>
</html>
目前，除了IE8及更早版本外，所有瀏覽器均已支持rem。對於不支持它的瀏覽器，應對方法也很簡單，就是多寫一個絕對單位的聲明。這些瀏覽器會忽略rem用設定的字體大小。
歡迎各位一起探討