css3 100vw |css3鼠标经过切换不同页面

CSS3的100vw单位是一个相对于视窗宽度的长度单位。它表示文档的1/100视窗宽度。如果视窗宽度为1000px，则100vw等于1000px。 100vw常用于响应式设计中，可以使用它来设置页面的宽度和高度。比如可以使用以下代码设置一个占满整个视口宽度的div：

div {
width: 100vw;
height: 100vh;
}

像素单位(px)是最广泛使用的长度单位，但它不能适应不同屏幕大小的设备，100vw则可以解决这个问题。它还可以用于制作具有动态效果的网站。比如，可以在移动端中使用100vw将背景图片占满整个视口：

.bg {
background-image: url("image.jpg");
background-size: 100vw;
background-position: center;
background-repeat: no-repeat;
}

需要注意的是，100vw单位不包括滚动条的宽度，因此在某些场景下需要将宽度设置成100vw加上滚动条的宽度。 在使用100vw单位时，需要对兼容性进行考虑。一些较老版本的浏览器不支持此单位，因此需要使用兼容性前缀：

.box {
width: -webkit-fill-available; /* Safari, iOS Safari */
width: -moz-available; /* Firefox */
width: -ms-available; /* Internet Explorer */
width: -o-available; /* Opera */
width: available; /* standard syntax */
}

总之，100vw是一个非常方便的css3单位，可以用于构建响应式网站和具有动态效果的页面，同时对于部分兼容性不佳的浏览器也需进行一定的兼容性处理。