css单位盘点
css单位有：px，em，rem，vh，vw，vmin，vmax，ex，ch 等等
1、px单位最常见，也最直接，这里不做介绍。
2、em：em的值并不是固定，它继承父级元素的字体大小，所以层数越深字体越大。
1 <body style="font-size:16px;"> 2 hello - font-size:16px 3 <div style="font-size:1.5em;"> 4 hello 01 - font-size:24px 5 <div style="font-size:1.5em;"> 6 hello 02 - font-size:36px 7 </div> 8 </div> 9 </body>
3、rem：rem是css3新增的一个相对单位，与em不同的一点是rem相对于根元素(html)字体大小。tip：浏览器默认字体大小是16px。
1 <body> 2 hello - font-size:16px 3 <div style="font-size:1.5rem;"> 4 hello 01 - font-size:24px 5 <div style="font-size:1.5rem;"> 6 hello 02 - font-size:24px 7 </div> 8 </div> 9 </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-*这样的类名。
1 var viewport = { 2 viewportWidth : document.documentElement.clientWidth, 3 calc : function() { 4 var rootSize = this.viewportWidth / 750 * 100; 5 document.documentElement.style['font-size'] = rootSize + 'px'; 6 }, 7 resetImageScale : function() { 8 var scaleStr = this.viewportWidth / 750; 9 var imageScaleStyle = document.createElement('style'); 10 var inertCss = 11 '\n\ 12 [class^="icon"]{\n\ 13 zoom:' + scaleStr + ';\n\ 14 }\n\ 15 '; 16 imageScaleStyle.innerHTML = inertCss; 17 document.head.appendChild(imageScaleStyle); 18 }, 19 init : function() { 20 viewport.calc(); 21 viewport.resetImageScale(); 22 window.addEventListener('resize', function(){ 23 viewport.calc(); 24 viewport.resetImageScale(); 25 }); 26 } 27 };
