CSS常用的单位(em/rem、vw/vh、vmin/vmax)

1、em/rem

em的大小，取决于自身的字体大小，并乘以em的倍数，代码如下，效果拷贝了自己去试。

em 
   em
      em
         em
            em
            
         
      
   

比如做一个按钮 -> 只需要改变字体大小，就能够改变按钮的大小，代码如下：

按钮
.button{width:4em; height:2em; font-size:14px;}

比如做一个自定义的组件：

   
标题
   
正文
   按钮

.template{ font-size:24px; height:10em; width:20em; background:gray; padding:0.6em; box-sizing:border-box; }
.header{ font-size: 2em; font-weight: bold; }
.section{ font-size:1.4em; height:2em; }
.button{ width:4em; height:2em; font-size:1.4em; }

接下来值需要改变字体的大小，内部的内容就会跟着自适应，感觉是还不是很哈皮。
缺点是em不适合嵌套太多层的组件否则每部每次都要计算父节点的大小，那就得不偿失了。

然后再说rem，rem的大小，取决于网页根节点的大小。

rem
   rem
       rem
         rem
            rem
            
         
      
   

个人觉得一个网页用px还是用em还是用rem并不是什么需要纠结的问题，反正都不要钱，完全可以穿插着用，用适合的单位解决适合的问题。

2、vw/vh

vw/vh 当前视窗的1% width/height -> 100vw = 100%视窗宽度 || 100vh = 100%视窗高度

比如，对初学者而言的一个问题，底部在页面超过屏幕时，自适应文档高度，在404等奇葩页面时，紧贴屏幕底部。

   
main
   
footer

缺点：这个底部的高度不能自适应，还有更多的解决方案，如果有兴趣的话，我之后会写的，如果你急着知道的话，也可以给我留言。

3、vmin/vmax

vmin/vmax 以当前窗口的最小/最大为百分比，

这个就不多说了，毕竟用的不太多，个人才疏学浅，暂时也没有用到。
另外还有ex和eh，具体没有了解太多，据说是基于字体的度量单位，依赖当前设定的字体，感兴趣的可以去问度娘。