谈谈一些有趣的CSS题目（25）-- vh、vw、vmin、vmax 知多少

[chokcoco]

介绍一些 CSS3 新增的单位，平时可能用的比较少，但是由于单位的特性，在一些特殊场合会有妙用。

vw and vh

1. 1vw 等于1/100的视口宽度 （Viewport Width）

2. 1vh 等于1/100的视口高度 （Viewport Height）

综上，一个页面而言，它的视窗的高度就是 100vh，宽度就是 100vw 。看个例子：

CodePen Demo

响应式web设计离不开百分比。但是，CSS百分比并不是所有的问题的最佳解决方案。CSS的宽度是相对于包含它的最近的父元素的宽度的。但是如果你就想用视口（viewpoint）的宽度或者高度，而不是父元素的，那该肿么办？ 这就是 vh 和 vw 单位为我们提供的。

1vh 等于1/100的视口高度。栗子：浏览器高度900px, 1 vh = 900px/100 = 9 px。同理，如果视口宽度为750， 1vw = 750px/100 = 7.5 px。

可以想象到的，他们有很多很多的用途。比如，我们用很简单的方法只用一行CSS代码就实现同屏幕等高的框。

.slide {
    height: 100vh;
}

假设你要来一个和屏幕同宽的标题，你只要设置这个标题的font-size的单位为vw，那标题的字体大小就会自动根据浏览器的宽度进行缩放，以达到字体和viewport大小同步的效果。

vmin and vmax

vh和 vw 依据于视口的高度和宽度，相对的，vmin 和 vmax则关于视口高度和宽度两者的最小或者最大值

1. vmin — vmin的值是当前vw和vh中较小的值。
2. vmax — vw和vh中较大的值。

这个单位在横竖屏的切换中，十分有用。

在一些 Demo 示例，或者大页面中，我们经常都会看到上述 4 个单位的身影。灵活使用，就可以减少很多 CSS 的代码量。

[keq]

nice

[coderew]

vmin and vmin写错了，应该是vmin and vmax

[qingmingsang]

感觉和%比没什么太大的区别啊

[fanerge]

@qingmingsang 百分比是针对与该元素的包含块来计算的，vh、vw是针对浏览器的视口做计算的，详细可以查看我的博客 我所了解的CSS包含块 这里有介绍。