字体大小自适应纯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 （已经用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，再一次 回流+重绘

关于重绘和回流