rem
rem被定义为相对于当前对象内文本的字体大小；如果你给body元素设置了一个字体大小，那么body元素的任何子元素的em值都等于body设置的font-size;
<body>
<div class='demo'>demo</div>
</body>
<style>
body {
font-size:14px;
}
.demo {
font-size:1.2em;// calculated at 14px * 12, or 16.8px;
}
</style>
注：
div中的找字体大小是1.2em,即div从父类元素继承字体大小的1.2倍；此处， body 的字体是14px,那么div的字体大小：12* 14 = 16.8px；
需要注意的是：em的单位大小和当前元素的父元素的字体大小有着直接的关系，具体情况如下：
<body>
<div>
Demo <!-- 14 * 1.2 = 16.8px; -->
<div>
Demo1 <!-- 16.8 *1.2 = 20.16px -->
<div>
Demo2 <!-- 20.16 * 1.2 = 24.192px -->
</div>
</div>
</div>
</body>
虽然在某些情况下 ，可能会需要用到这种效果，但是通常情况下 我们一般用的还是单一的相对单位就好； rem：表示的就是根据根元素设置字体的带下，一般情况下根元素指的都是html;具体如下：
html {
font-size:14px;
}
div {
font-size:1.2rem;
}
此时上面演示代码中嵌套的div中的字体大小就都是： 14 px 1.2 = 16.8px；
rem 不仅仅能适用于设置字体的大小，也可以用于页面布局；即 你阔以用基于html根元素字体大小的rem作为整个页面或ui库的大小单位，然后在其他特定的地方用em单位，这样将会给你带来更多的便利；代码如下：
html {
font-size:14px;
}
.box {
width:70rem; // 14px * 70 = 980px;
}
vh 和vw
*vh和vw主要是用来描述当前视口的单位；1vh表示1%的视口高度；如果浏览器的高度是900px,那么1vh = 900px * 1% = 9px； 同样如果视口的宽度是750px,那么 1vw = 750px * 1% = 7.5px；
通过vw和vh可以很容易实现盒子和屏幕等高和等宽
.con {
height:100vh;
width:100vw;
}
如果想让页面中的字体会自动根据浏览器的宽度进行缩放，只需要将元素的font-size的单位设置为vw就阔以；代码如下：
<h2>how are you?</h2>
<div>
demo
</div>
body {
background:red;
padding:1% 0;
color:'#fff';
}
h2 {
font-size:4vw;
margin-bottom:.2em;
}
vmin 和vmax
vmin和vmax是相关于视口高度和宽度两者的最小和最大值；
如果浏览器的高宽分别为700px和1100px,则2vmin=7px,1vmax=11px;如果高度分别是1080px和800px,则1min=8px,1vmax = 10.8px;
适用情况： 如果需要一个元素始终在屏幕可见，则只需要在为其宽度和高度都使用vmin单位，并赋予其低于100的值就可以做到； 例如，可以这样定义一个至少有两边触摸到屏幕的方形；代码如下：
.box {
height:100vmin;
width:100vmin;
}
如果需要让这个方形始终铺满整个视口（四边始终触摸到屏幕的四边）
.box {
height:100vmax;
width:100vmax;
}
网友评论