css3中vm和vh详解，巧用vmin和vmax解决自适应宽高布局

在制作响应式网页的时候一般会对百分比有很大的依赖，但是vm和vh，vmin和vmax这4个元素却可以解决我们很多的烦恼。

Viewport width，即容器（可以是div）的宽度，默认1vw=整个视窗宽度的1%，全屏为100vw。比如视窗宽度为1200px，1vw=120px=1200px*1%，如果是满屏就则为100vw=1200px。

Viewport height，即容器（如div）的高度，默认1vh=整个可视窗口高度的1%，全屏是100vh。

支持加减乘除运算和常用计算单位。

使用“+”、“-”、“” 和 “/”四则运算；可以使用百分比、px、em、rem等单位；可以混合使用各种单位进行计算；表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(10%+5em)"这种没有空格的写法是错误的；表达式中有“”和“/”时，其前后可以没有空格，但建议留有空格。

div{height: calc(100vh-100px);}这是将div的高度设置为视窗高度减去100px，支持max-width和min-width这样的计算，calc运算为设计提供很大的方便，再也不用百分比了，做出来的效果更绚丽。

vmin：表示选择视窗最小的那一个；vmax：选择视窗最大的那一个；和vw与vh一样支持calc的各种单位和运算符

如上图所示，div {height:100vmin;width:100vmin;}，宽和高均选择最小的那一个视窗，可以看到这是一个以手机屏幕的宽（最小）来设定div的宽高。

同样的道理，如果需要选择最大的那一个视窗作为宽或高，那么就使用vmax即可，如下图所示。

代码为div {height:100vmax;width:100vmax;}，选择设备视窗最大的那一个作为我们的宽或高，也支持calc运算。

使用vmin或vmax的好处是可以对各种不同屏幕设置相对宽高，这对于视觉效果很好，而且不会导致排版混乱，减少很多@media判断屏幕宽度的代码。例如下面的代码

这个是我的一张图片响应式代码，最大宽度和高度都设置为视窗宽度的三分之一，对于从手机屏幕320到768px的屏幕上显示很良好。

vw（vh）或vmin（vmax）中默认的满屏是100，即100vw、100vh、100vmin、100vmax。但是100并不是屏幕的实际宽度，而是所在的容器的宽度。

比如电脑屏幕宽度是1920px，网页中的div宽度是1200px，此时100vw就是1200px而不是1920px；而高度100vh则指的是浏览器右侧出现滚动条的可见高度部分，不包含浏览器地址栏、工具栏和底部的状态栏哦。

自从学会了使用这几个标签，感觉依赖上了，很多响应式功能用它来实现，香喷喷。