css3 单位vw、vh、vmin、vmax的详解

px、em、rem、vw、vh、vmin、vmax 的含义

px：绝对单位，页面按精准像素展现

em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算；em不是一个固定的值，可以设置`body{font-size：62.5%}

rem：相对单位，可以理解为"root em"，相对根节点html 的字体大小来计算，css3新增加属性。

vw：viewpoint width，视窗宽度，1vw 等于视窗宽度的1%。

vh：viewpoint height，视窗高度，1vh 等于视窗高度的1%。

vmin：vw和vh较小的那个。

vmax：vw和vh较大的那个。

vw、vh 与 % 百分比的区别

1. % 是相对于父元素的大小设定的比率，vw、vh 是视窗大小决定的。
2. vw、vh 优势在于能够直接获取高度，而用 % 在没有设置 body 高度的情况下，是无法正确获得可视区域的高度的，所以这是挺不错的优势。

vmin、vmax 用处

移动页面开发时，如果使用 vw、wh 设置字体大小（比如 5vw），在竖屏和横屏状态下显示的字体大小是不一样的。
由于 vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就可以用到 vmin 和 vmax。使得文字大小在横竖屏下保持一致。

---

实用案例

1. 用width:100vw;height:100vw;background:rgba(0,0,0,.5);position:fixed;left:0;top:0来做遮罩层

---

2. 字体大小随页面的宽度而定，如width:100vw;font-size:5vw;表示宽度100vw;字体是宽度的5%。

---

3. 弹出框大小随内容自适应：遮罩层使用 vw、vh 实现全屏覆盖。弹出框添加到遮罩层中并居中。
   

.dialog-container {
  width: 100vw;
  height: 100vh;
  background-color: rgba(0,0,0,.35);
  text-align: center;
  position: fixed;
  top: 0;
  left: 0;
}
.dialog-container:after {
  display: inline-block;
  content: '';
  width: 0;
  height: 100%;
  vertical-align: middle;
}
.dialog-box {
  display: inline-block;
}

<div class="dialog-container">
	<div class="dialog-box">
		<img src="./images/3.jpg" class="demo-image" width="800px"/>
	</div>
</div>