css 里面有很多长度单位，有些长度单位上固定的，比如 px，像素 .. 还有些是相对某个值的单位，比如 em 或者 rem 。

还有就是相对于 viewport，也就是视口的长度单位，viewport 就是可视窗口 ..

复制项目下面的 practices 里的 demo.html ，名字是 vw-vh.html .. 修改一下页面的标题 .. vw - vh

在 body 里面，添加一个 div .. 我们在这个元素上用一下 vw 还有 vh 单位的长度 ..

一个 div 作为样式的选择器 .. 里面用一下 width 属性 .. 宽度先用固定的像素单位 .. 比如 300px ，再用一下 height 属性，设置一下元素的高度 .. 也把它设置成 300px ...

再给它添加一个背景颜色 .. 0000ff

页面上会显示一个固定大小的正方形 .. 现在我们把 width 的值改成 50vw ，把 height 的值改成 50vh ..

现在页面上显示的这个矩形的长度还有宽度，会基于 viewport 的长度还有宽度的变化而变化 .. 50vw 表示宽度是视口的 50% ...

50vh 表示高度是视口的 50% .. 在做适应式页面设计的时候， vw 还有 vh 这种单位会非常有用 ..