em,rem,vh,vw,vmin,vmax

css的单位越来越多了，怕混淆，记个小本本

一、em和rem

1)、em

当前字体大小。如果你在body元素上设置一个字体大小，那么在body元素内的任何子元素的em值都等于这个字体大小。

如果body中的div字体大小写了 x em,那么实际这个font-size就等于x乘以body的font-size值

html,body{
    font-size:10px;
}

div{
    font-size:1.5em;//10px*1.5=15px
}

2)、rem

为什么产生rem，因为em会由于我们不断的嵌套html导致最小的元素的值会扩大n次

比如上面定义的div是1.5em,那么这个div里面你再嵌套一个p标签,然后p标签再写上font-size:1.2em,结果这个p标签的px值为10px*1.5*1.2而非10px*1.2。

so，rem出现了，r即为root（根）,无论如何嵌套rem会一直取根元素，即html\body的font-size为基数去计算

html,body{
    font-size:10px;
}

div{
    font-size:1.5em;//10px*1.5=15px
}
div > p{
    font-size:1.2em;//10px*1.5*1.2=18px
}

div > p > span{
    font-size:1.2 rem;//10px*1.2=12px
}

二、vh和vw

vh、vw其实理解v就ok了，v(viewpart)可视部分，即浏览器可视部分，所以vh、vw直接理解为：浏览器可视高度，可是宽度

例：设浏览器可是宽高为：1080*750

div{
     height:100vh;//750*100%
     width:100vw;//1080*1%
}

p{
     height:1vh;//750*1%
     width:1vw;//1080*1%
}

三、vmin和vmax

看了vh和vw之后再来理解vmin、vmax就好说了，v还是那个意思(浏览器可视部分)

还是要拿代码说话

//设浏览器宽高为1080*750
div{
    height:100vmin;//此时宽高中的最小值是750,所以750*100%=750px
}

div > p{
    height:50vmax;//此时宽高中的最大值是1080,所以1080*50%=540px
}



//设浏览器宽高为1080*2048
div{
    height:100vmin;//此时宽高中的最小值是1080,所以1080*100%=1080px
}

div > p{
    height:50vmax;//此时宽高中的最大值是2048,所以2048*50%=1024px
}

好了，如有不当之处还望指正