<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.
css3中有很多新的单位，其中一个是vw 。如果你设置 font-size:10vw就代表一个文字占屏幕宽度的10%；
如果你设置 font-size:20vw就代表一个文字占屏幕宽度的20%；
这样文字就可以随屏幕的大小而自动适应
不过这个属性ios可以兼容，安卓并不兼容。
css自适应宽度有2种方式：1.是通过百分比来控制宽度；
2.可以通过块状元素自动占满父级的宽度的特性来实现
PS：当然还有一些方法，比如css3的flex-box布局，用flex布局的话，非常的方便可以实现多种自适应布局，但是，只适用于移动端，PC端上面只有高版本的浏览器才兼容，低版本的浏览器是不兼容的。
