css单位盘点

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();
         });
     }
 };