CSS3新单位vw、vh的简易使用教程

vw/vh的概念

vw/vh是CSS3新增的两个单位，它们分别代表视口宽度和视口高度的百分比。vw指的是1/100 viewport width，而vh则是1/100 viewport height。

vw/vh的使用方法

使用vw/vh有两种方式：

• 第一种是直接在CSS中使用，例如：

  width: 10vw;

  表示宽度为视口宽度的10%。
• 第二种是在JavaScript中使用，例如：

  document.documentElement.style.fontSize = '10vw'

  表示字体大小为视口宽度的10%。

vw/vh的优点

• vw/vh能够更好地适配不同分辨率的屏幕，从而使网页在不同设备上都能够正确显示。
• vw/vh可以更好地控制元素在不同屏幕上的宽度和高度，从而更好地实现响应式设计。
• vw/vh在使用上更加简单，可以更快捷地实现需求。

vw/vh的缺点

• vw/vh不支持IE浏览器，在IE浏览器中无法使用。
• vw/vh的计算过程比较复杂，使用起来可能比较麻烦。
• vw/vh的单位计算可能会出现一些误差，导致元素的大小和预期不一致。