字型大小自適應純css解決方案
viewpoint
css3提供了一些與當前viewpoint相關的元素，vw，vh，vim等。
“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
<!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%；縮小瀏覽器視窗，當寬度小於900時會出現滾動條，向右滾動，會發現藍色部分並不是100%，這個問題大家可以去思考下。
bug處理
回到上面的問題，font-size:4vw，應該會使得字型的大小變化，可是他沒有，和標準說的不一樣，所以可以認為是一個bug。
window.onresize = function(){ var box = document.getElementById("box"); box.style["z-index"] = 1; }
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處理相當簡單，不知道大家還有沒有其他比較好的方案，可以提出來交流下~
再分享一下我老師大神的人工智慧教程吧。零基礎！通俗易懂！風趣幽默！希望你也加入到我們人工智慧的隊伍中來！http://www.captainbed.net
viewpoint
css3提供了一些與當前viewpoint相關的元素，vw，vh，vim等。
“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%；縮小瀏覽器視窗，當寬度小於900時會出現滾動條，向右滾動，會發現藍色部分並不是100%，這個問題大家可以去思考下。
bug處理
回到上面的問題，font-size:4vw，應該會使得字型的大小變化，可是他沒有，和標準說的不一樣，所以可以認為是一個bug。
window.onresize = function(){ var box = document.getElementById("box"); box.style["z-index"] = 1; }
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處理相當簡單，不知道大家還有沒有其他比較好的方案，可以提出來交流下~