我们在做网站制作的时候有事需要自提自动适应网页大小，所以今天小编就总结了一下CSS自适应字体大小案例如下：
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>Demotitle>
<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 Demotitle>
<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. 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; }}
