rem vh vw vmin vmax做为CSS3中的新单位,对CSS3的单位的使用了解是非常重要的,也许你会遇到一个问题可以通过css的这些单位得到解决,同时对于rem,vh和vw,百分比等都是我们做自适应网站常用的方法。
rem
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:视窗高度的百分比
.demo{//一行css实现同屏幕等高,等宽
height: 100vh;
width:100wh;
}
vmin 和 vmax
vmin:当前较小的vw和vh
vmax:当前较大的vw和vh
总结: