在项目中碰到过这种问题：同一页面，在不同大小的显示设备上显示，都希望效果最佳，这时肯定不能用统一某个单位设置字体大小及元素大小的。牛叉的CSS3用一个单位就完美解决了这个问题（我之前竟然是通过下载的一个js文件解决的，真实不知者不罪）

屏幕大小，简称视口：viewport。我们把屏幕的宽和高都记为100个单元：

         
1vw = 一个视口宽度单元，及屏幕宽度的1/100;

         
1vh = 一个视口高度单元，及屏幕高度的1/100;

         
1vmin = Math.min(1vw,1vh);

         
1vmax = Math.max(1vw,1vh);

这个能很好的自适应，用起来相当简单，计算都只是针对于屏幕宽高。

浏览器支持情况，除了IE9

总结： 相较于百分比，这种单位的使用简直太高效了，无论元素在DOM结构中多么深的层级里，是要设置的是这种单位，都是相对于屏幕宽高计算。而不像百分比很多情况下都是相对于父级元素计算，或者本身计算