css单位有：px，em，rem，vh，vw，vmin，vmax，ex，ch 等等
1、px单位最常见，也最直接，这里不做介绍。
2、em：em的值并不是固定，它继承父级元素的字体大小，所以层数越深字体越大。
<body style="font-size:16px;">
hello - font-size:16px
<div style="font-size:1.5em;">
hello 01 - font-size:24px
<div style="font-size:1.5em;">
hello 02 - font-size:36px
</div>
</div>
</body>
3、rem：rem是css3新增的一个相对单位，与em不同的一点是rem相对于根元素(html)字体大小。tip：浏览器默认字体大小是16px。
<body>
hello - font-size:16px
<div style="font-size:1.5rem;">
hello 01 - font-size:24px
<div style="font-size:1.5rem;">
hello 02 - font-size:24px
</div>
</div>
</body>
4、vh 和 vw
在进行响应式布局时，我们常常会使用百分比来布局，然而CSS的百分比不总是解决每个问题的最佳方案，CSS的宽度相对于离它最近的父元素的宽度。 如果你想使用视口的宽度、高度而不是父元素的宽高，可以使用vh和vw单位。 1vh = viewportHeight /100; 1vw = viewportWidth /100; 使用vh、vw就可以保证元素的宽高适应不同设备。
5、vmin 和 vmax
vw和vh对应于viewport的width和height，而vmin和vmax分别对应于width、height中的最小值和最大值，例如如果浏览器的宽/高为1000px/600px，那么 1vmin = 600 /100; vmax = 1000 /100;
6、ex 和 ch
ex、ch单位与em、rem相似之处在于都依赖于font-size，但是ex、ch还依赖于font-family，基于font-specific来计算。
不同大小屏幕手机的一个自适应策略：
先引入viewport.js（执行viewport.init();），字体用rem单位（需 /100），需要自适应的图标加上icon-*这样的类名。
var viewport = {
viewportWidth : document.documentElement.clientWidth,
calc : function() {
var rootSize = this.viewportWidth / 750 * 100;
document.documentElement.style['font-size'] = rootSize + 'px';
},
resetImageScale : function() {
var scaleStr = this.viewportWidth / 750;
var imageScaleStyle = document.createElement('style');
var inertCss =
'\n\
[class^="icon"]{\n\
zoom:' + scaleStr + ';\n\
}\n\
';
imageScaleStyle.innerHTML = inertCss;
document.head.appendChild(imageScaleStyle);
},
init : function() {
viewport.calc();
viewport.resetImageScale();
window.addEventListener('resize', function(){
viewport.calc();
viewport.resetImageScale();
});
}
};