viewpoint
css3提供了一些與當前viewpoint相關的元素，vw，vh，vmin, vmax等。
“viewpoint” = window size vw = 1% of viewport width 1vh = 1% of viewport height 1vmin = 1vw or 1vh, 最小 1vmax = 1vw or 1vh, 最大
兼容性：chrome 20+/ safari 6+/ IE 10+ / FF 19+ / IOS 6+
DEMO地址：http://qianduannotes.sinaapp.com/test/fontResize.html （已經用JS修正重繪bug）
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style type="text/css">
#box { font-size: 4vw;}
</style>
</head>
<body>
<div id="box">
我是靖鳴君 我是靖鳴君 我是靖鳴君
</div>
</body>
</html>
但是該方案存在一個bug，上面的代碼，當瀏覽器窗口變化的時候，box中的文字並沒有按照應有的比例變化，但是css3標准中是這么說的：
When the height or width of the viewport is changed, they are scaled accordingly.
插曲
像這樣的問題，我之前也遇到過，比如以下代碼：（小插曲，可跳過）
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3 Demo</title>
<style type="text/css">
body, div { margin:0; padding: 0;}
.wrap { background: blue; width: 100%;}
.box { width: 900px; height: 200px;}
</style>
</head>
<body>
<div class="wrap"><div class="box"></div></div>
</body>
</html>
DEMO地址：http://qianduannotes.sinaapp.com/test/paintBug.html
box的寬度設置為900px，wrap設置為100%(~~這個百分比是相對於viewport的)；縮小瀏覽器窗口，當寬度小於900時會出現滾動條，向右滾動，會發現藍色部分並不是100%，這個問題大家可以去思考下。
bug處理
回到上面的問題，font-size:4vw，應該會使得字體的大小變化，可是他沒有，和標准說的不一樣，所以可以認為是一個bug。
window.onresize = function(){
var box = document.getElementById("box");
box.style["z-index"] = 1; //顯式的觸發repaint
}
z-index可以對應的元素被重繪（repaint）。
延伸一點點關於重繪（repaint）和回流（reflow）的知識：
1. 添加、刪除元素(回流+重繪)
2. 隱藏元素，display:none(回流+重繪)，visibility:hidden(只重繪，不回流)
3. 移動元素，比如改變top,left(jquery的animate方法就是,改變top,left不一定會影響回流)，或者移動元素到另外1個父元素中。(重繪+回流)
4. 對style的操作(對不同的屬性操作，影響不一樣)
5. 還有一種是用戶的操作，比如改變瀏覽器大小，改變瀏覽器的字體大小等(回流+重繪)
讓我們看看下面的代碼是如何影響回流和重繪的:
var s = document.body.style;
s.padding = "2px"; // 回流+重繪
s.border = "1px solid red"; // 再一次 回流+重繪
s.color = "blue"; // 再一次重繪
s.backgroundColor = "#ccc"; // 再一次 重繪
s.fontSize = "14px"; // 再一次 回流+重繪
// 添加node，再一次 回流+重繪
關於重繪和回流
其他方案
1. css expression， 這個效率比較低，不推薦使用
#box { star:expression(onresize = function(){
var res = parseInt(this.style.width) / 20;
res = res < 9 : "9px" ? res + "px";
this.style.fontSize = res;
});
}
//P.S:上面代碼沒測試，不知道寫錯沒有
與其說用的css，還不如說是JS，而且是效率不夠的JS。
2. media query，這東西也不是特別好用
h2{
font-size:25px
}
@media screen and (max-width: 850px){/* 可視區域小於 850px, 設置更小font-size屬性 */
h2{
font-size:19px;
}
}
用media query會使得字體的變化出現不連貫性，而且要可能設置多個@media，相當麻煩。
3. media query + -webkit-transition 實現平滑轉變
DEMO地址：http://qianduannotes.sinaapp.com/test/fontResize2.html
div{
font-size: 40px;
-webkit-transition:font-size 0.2s ease-out;
}
@media only screen and (max-width: 1200px) { div{ font-size: 39px; }}
@media only screen and (max-width: 1100px) { div{ font-size: 38px; }}
@media only screen and (max-width: 1000px) { div{ font-size: 37px; }}
@media only screen and (max-width: 900px) { div{ font-size: 36px; }}
@media only screen and (max-width: 800px) { div{ font-size: 35px; }}
@media only screen and (max-width: 700px) { div{ font-size: 34px; }}
@media only screen and (max-width: 600px) { div{ font-size: 33px; }}
@media only screen and (max-width: 500px) { div{ font-size: 32px; }}
@media only screen and (max-width: 400px) { div{ font-size: 31px; }}
@media only screen and (max-width: 300px) { div{ font-size: 30px; }}
小結
這玩意兒其實也沒太大作用，用JS處理相當簡單，不知道大家還有沒有其他比較好的方案，可以提出來交流下~
-----------------------------------------------------------------
4. rem + js
css3中單位px,em,rem,vh,vw,vmin,vmax的區別及瀏覽器支持情況
px：絕對單位，頁面按精確像素展示
em：相對單位，基准點為父節點字體的大小，如果自身定義了font-size按自身來計算（瀏覽器默認字體是16px），整個頁面內1em不是一個固定的值。
rem：相對單位，可理解為”root em”, 相對根節點html的字體大小來計算，CSS3新加屬性，chrome/firefox/IE9+支持。
(另外需注意chrome強制最小字體為12號，即使設置成 10px 最終都會顯示成 12px，當把html的font-size設置成10px,子節點rem的計算還是以12px為基准，所以網上很多文章提到的將html的font-size設為10方便計算不是那么可取)。
rem在移動端應用可參考淘寶的頁面http://m.taobao.com (html的font-size通過動態計算獲取)
頁面基准320px(20px),html font-size值的計算：
- var ele=document.getElementsByTagName("html")[0],
- size=document.body.clientWidth/320*20;
- ele.style.fontSize=size+"px"
注：需設置meta縮放比1:1
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
vw：viewpoint width，視窗寬度，1vw等於視窗寬度的1%。
vh：viewpoint height，視窗高度，1vh等於視窗高度的1%。
vmin：vw和vh中較小的那個。
vmax：vw和vh中較大的那個。
vw, vh, vmin, vmax：IE9+局部支持，chrome/firefox/safari/opera支持，ios safari 8+支持，android browser4.4+支持，chrome for android39支持
其它的單位還有：
%:百分比
in:寸
cm:厘米
mm:毫米
pt:point，大約1/72寸
pc:pica，大約6pt，1/6寸
ex：取當前作用效果的字體的x的高度，在無法確定x高度的情況下以0.5em計算(IE11及以下均不支持，firefox/chrome/safari/opera/ios safari/android browser4.4+等均需屬性加么有前綴)
ch:以節點所使用字體中的“0”字符為基准，找不到時為0.5em(ie10+,chrome31+,safair7.1+,opera26+,ios safari 7.1+,android browser4.4+支持)