理解并使用CSS3中的单位rem vh vw vmin vmax
rem vh vw vmin vmax做为css3中的新单位，其实都出来挺久的了，这篇文章将总结并理解下它们。
rem
如果你给body设置了font-size字体大小，那么body的任何子元素的1em就是等于body设置的font-size
body { font-size: 14px; }
div { font-size: 1.2rem; // calculated at 14px * 1.2, or 16.8px}em
从它上一级父元素继承了字体大小，并且逐渐得增加。
<body>
<div class=”div1”>
<div class=”div2”>
<div class=”div3”>
</div>
</div>
</div>
</body>
<style>
body{ font-size：14px; }
div1{font-size:1.2em};//1.2*14PX
div2{font-size:1.2em}//1.2*1.2*14px
div3{font-size:1.2em}//1.2*1.2*1.2*14px
</style>vh 和 vw
vw：视窗宽度的百分比
vh：视窗高度的百分比
视窗，指的是浏览器可视区域的宽高，也就是window.innerWidth/window.innerHeight。1vw就是1%的浏览器的宽度。100vw就是整个视窗的宽度。
.demo{//一行css实现同屏幕等高，等宽
height: 100vh;
width:100wh;
}vmin 和 vmax
vmin：当前较小的vw和vh
vmax：当前较大的vw和vh
vmin 和 vmax则关于视口高度和宽度两者的最小或者最大值 浏览器的宽度设置为1100px，高度设置为700px， 1vmin = 7px， 1vmax = 11px。 如果宽度设置为800px,高度设置为1080px, 1vmin就等于8px, 1vmax则未10.8px
总结：
对CSS的单位的使用了解是非常重要的，也许你会遇到一个问题可以通过css的这些单位得到解决，同时对于rem,vh和vw,百分比等都是我们做自适应网站常用的方法。
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！