css中的vw和vh

在CSS中，我们通常使用像素或百分比来定义元素的大小和位置。但是，当我们需要是元素能够自适应屏幕大小时，就需要了解vw和vh单位。

vw和vh表示视口宽度（Viewport Width）和视口高度（Viewport Height）的百分比。视口是指浏览器窗口。例如，当浏览器窗口的宽度为1000像素时，1vw等于10像素。

/*将元素的宽度设置为屏幕宽度的50%*/
width:50vw;

/*将元素的高度设置为屏幕高度的30%*/
height:30vh;

使用vw和vh单位的优点是可以让元素自适应屏幕大小，而不需要使用JavaScript等其他技术。同时，使用vw和vh可以使得设计更加灵活，可以根据不同的屏幕尺寸进行适配。

需要注意的是，vw和vh单位并不支持所有的浏览器。在使用时，应该进行兼容性测试，或者使用其他的解决方案。