前端开发CSS中视窗单位的使用px pt vh vw等

写在前面：
视窗(Viewport)单位已经有了好几年了，但我们并没有看到它被经常使用。它们现在正在被所有的主流浏览器所支持并提供独特的功能使它在特定情况下非常有用，特别是那些涉及响应式的设计。

不过最重要的一句话：

本文中的vw、vh、vmin、vmax在ie8及以下无效果。。。如果考虑这些浏览器的童鞋下面的东东可以不用看了。。。
不用看了。。。
不用看了。。。
不用看了。。。

我忍不住，又说了三遍！奇怪，我为什么要说又呢……
本文中的效果个人表示喜欢的不要不要的，
代码区域的效果可以通过改变代码区域的“效果预览”窗口大小来查看。

解释：
视窗(Viewport)是你的浏览器实际显示内容的区域——换句话说是你的不包括工具栏和按钮的网页浏览器。这些单位是vw,vh,vmin和vmax。它们都代表了浏览器（视窗(Viewport)）尺寸的比例和窗口大小调整产生的规模改变。

比方说我们有一个1000px（宽）和800px（高）的视窗(Viewport)

[quote]
vw——代表视窗(Viewport)的宽度为1%，在我们的例子里50vw = 500px。
vh——窗口高度的百分比 50vh = 400px。
vmin——vmin的值是当前vw和vh中较小的值。在我们的例子里因为是横向模式，所以50vim = 400px。
vmax——大尺寸的百分比。50vmax = 500px。

[/quote]

你可以在任何一个可以使用像素值的地方使用它们，比如width,height,margin,font-size等等。它们将通过窗口大小的调整或旋转设备的浏览器来重新计算这些值。

下面来说下几个用法：

1、占用页面的整个高度
一般会写
div{
height: 100%;
}
然而，这样必须为html和body添加100%的高度。使用vh就变得相当容易了，只需要为div高度设置100vh，那它将永远都是你窗口的高度。
so perfect！

2、子元素大小根据浏览器改变而不是父元素
html 代码

3、响应字体大小
html 代码

4、响应垂直居中
普通做法是给弹层设置大小，然后position:fixed；再用margin。
使用vh，可以告别position，加快文档解析
html 代码

5、网格布局

你可以使用视窗(Viewport)单位来设置响应式网格。它们的行为类似于百分比但总是相对于视窗(Viewport)的大小。所以你可以将它们放在一个比窗口宽的父元素里，但它仍然有网格来保持其应有的宽度。这样来创建全屏滑块可谓得心应手。
html 代码