极客教程CSS中的vh和vw单位
在CSS中，我们经常会使用像px、em、rem等单位来定义元素的尺寸。除了这些常见的单位外，还有一些相对较新的单位，比如vh和vw。这两个单位分别代表视口高度（Viewport Height）和视口宽度（Viewport Width），它们可以帮助我们更灵活地控制元素的大小和位置。在本文中，我们将详细介绍vh和vw单位的用法，并提供一些示例代码来帮助大家更好地理解。
1. 使用vh单位设置元素高度
vh单位代表视口高度的百分比，例如，1vh等于视口高度的1%。通过使用vh单位，我们可以根据视口的高度来设置元素的高度，从而实现响应式设计。下面是一个简单的示例代码：
.element {
height: 50vh;
background-color: #f0f0f0;
}
在上面的示例中，我们设置了一个元素的高度为视口高度的50%。当视口的高度发生变化时，元素的高度也会相应地调整。
2. 使用vw单位设置元素宽度
类似于vh单位，vw单位代表视口宽度的百分比，例如，1vw等于视口宽度的1%。通过使用vw单位，我们可以根据视口的宽度来设置元素的宽度，实现响应式设计。下面是一个示例代码：
.element {
width: 50vw;
background-color: #f0f0f0;
}
在上面的示例中，我们设置了一个元素的宽度为视口宽度的50%。当视口的宽度发生变化时，元素的宽度也会相应地调整。
3. 使用vh和vw单位实现全屏效果
通过结合vh和vw单位，我们可以轻松实现全屏效果。下面是一个示例代码：
.fullscreen {
width: 100vw;
height: 100vh;
background-color: #333;
color: #fff;
text-align: center;
font-size: 2em;
display: flex;
justify-content: center;
align-items: center;
}
在上面的示例中，我们设置了一个元素的宽度为视口宽度的100%，高度为视口高度的100%，从而实现了全屏效果。同时，我们还设置了背景颜色、文字颜色、文字居中显示等样式。
4. 使用vh和vw单位实现响应式布局
除了设置元素的高度和宽度外，我们还可以利用vh和vw单位来实现响应式布局。下面是一个示例代码：
.container {
width: 80vw;
height: 80vh;
display: flex;
justify-content: space-around;
align-items: center;
}
.box {
width: 20vw;
height: 20vh;
background-color: #f0f0f0;
}
在上面的示例中，我们设置了一个容器元素的宽度为视口宽度的80%，高度为视口高度的80%，并使用flex布局实现了元素的水平居中。同时，我们设置了一个子元素的宽度为视口宽度的20%，高度为视口高度的20%，从而实现了响应式布局。
5. 使用vh和vw单位实现垂直居中
有时候我们希望将一个元素垂直居中显示，可以借助vh单位来实现。下面是一个示例代码：
.center {
width: 50vw;
height: 50vh;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #f0f0f0;
}
在上面的示例中，我们设置了一个元素的宽度为视口宽度的50%，高度为视口高度的50%，并使用绝对定位和transform属性将元素垂直居中显示。
6. 使用vh和vw单位实现固定尺寸的元素
有时候我们希望一个元素的尺寸保持固定，不随视口大小变化而变化，可以使用vh和vw单位结合calc()函数来实现。下面是一个示例代码：
.fixed-size {
width: calc(100vw - 100px);
height: calc(100vh - 100px);
background-color: #f0f0f0;
}
在上面的示例中，我们设置了一个元素的宽度为视口宽度减去100px，高度为视口高度减去100px，从而实现了一个固定尺寸的元素。
7. 使用vh和vw单位实现响应式字体大小
除了元素的尺寸外，我们还可以使用vh和vw单位来设置字体大小，实现响应式设计。下面是一个示例代码：
.text {
font-size: 5vw;
}
在上面的示例中，我们设置了一个元素的字体大小为视口宽度的5%，从而实现了一个响应式的字体大小。
8. 使用vh和vw单位实现响应式间距
除了元素的尺寸和字体大小外，我们还可以使用vh和vw单位来设置元素之间的间距，实现响应式设计。下面是一个示例代码：
.spacing {
margin: 2vh 5vw;
}
在上面的示例中，我们设置了一个元素的上下间距为视口高度的2%，左右间距为视口宽度的5%，从而实现了一个响应式的间距。
9. 使用vh和vw单位实现响应式边框
除了元素的尺寸和间距外，我们还可以使用vh和vw单位来设置元素的边框大小，实现响应式设计。下面是一个示例代码：
.border {
border: 1vw solid #333;
}
在上面的示例中，我们设置了一个元素的边框大小为视口宽度的1%，颜色为#333，从而实现了一个响应式的边框。
10. 使用vh和vw单位实现响应式圆角
除了元素的尺寸和边框外，我们还可以使用vh和vw单位来设置元素的圆角大小，实现响应式设计。下面是一个示例代码：
.rounded {
border-radius: 2vw;
}
在上面的示例中，我们设置了一个元素的圆角大小为视口宽度的2%，从而实现了一个响应式的圆角效果。
11. 使用vh和vw单位实现响应式背景图片大小
有时候我们希望背景图片的大小能够根据视口大小自适应，可以使用vh和vw单位来设置背景图片的大小。下面是一个示例代码：
.background {
background-image: url('https://www.geek-docs.com/image.jpg');
background-size: 50vw 50vh;
background-repeat: no-repeat;
}
在上面的示例中，我们设置了一个元素的背景图片大小为视口宽度的50%和视口高度的50%，从而实现了一个响应式的背景图片大小。
12. 使用vh和vw单位实现响应式渐变背景
除了背景图片外，我们还可以使用vh和vw单位来实现响应式的渐变背景。下面是一个示例代码：
.gradient {
background: linear-gradient(to right, #ff0000, #00ff00);
height: 50vh;
}
在上面的示例中，我们设置了一个元素的背景为水平渐变色，起始颜色为红色，结束颜色为绿色，高度为视口高度的50%，从而实现了一个响应式的渐变背景。
13. 使用vh和vw单位实现响应式阴影效果
除了背景和边框外，我们还可以使用vh和vw单位来设置元素的阴影效果，实现响应式设计。下面是一个示例代码：
.shadow {
box-shadow: 2vw 2vh 4vw #888888;
}
在上面的示例中，我们设置了一个元素的阴影效果，水平偏移为视口宽度的2%，垂直偏移为视口高度的2%，模糊半径为视口宽度的4%，颜色为#888888，从而实现了一个响应式的阴影效果。
14. 使用vh和vw单位实现响应式动画效果
除了静态样式外，我们还可以使用vh和vw单位来实现响应式的动画效果。下面是一个示例代码：
@keyframes move {
0% { transform: translateX(0); }
50% { transform: translateX(50vw); }
100% { transform: translateX(0); }
}
.animated {
animation: move 2s infinite;
}
在上面的示例中，我们定义了一个移动的动画效果，元素在X轴上来回移动，移动距离为视口宽度的50%，持续时间为2秒，无限循环播放。
15. 使用vh和vw单位实现响应式网格布局
除了单个元素的样式外，我们还可以使用vh和vw单位来实现响应式的网格布局。下面是一个示例代码：
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(20vw, 1fr));
grid-gap: 2vw;
}
在上面的示例中，我们使用grid布局实现了一个响应式的网格布局，每列的宽度为视口宽度的20%，最小宽度为1fr，列与列之间的间距为视口宽度的2%。
16. 使用vh和vw单位实现响应式导航栏
导航栏是网页中常见的元素，我们可以使用vh和vw单位来实现响应式的导航栏。下面是一个示例代码：
.navbar {
width: 100vw;
height: 10vh;
background-color: #333;
color: #fff;
display: flex;
justify-content: space-around;
align-items: center;
}
.nav-link {
font-size: 2vw;
}
在上面的示例中，我们设置了一个导航栏的宽度为视口宽度的100%，高度为视口高度的10%，背景颜色为#333，文字颜色为#fff，使用flex布局实现了导航链接的水平居中显示，并设置了导航链接的字体大小为视口宽度的2%。
17. 使用vh和vw单位实现响应式按钮样式
按钮是网页中常见的交互元素，我们可以使用vh和vw单位来实现响应式的按钮样式。下面是一个示例代码：
.button {
padding: 2vh 5vw;
font-size: 2vw;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
}
在上面的示例中，我们设置了一个按钮的内边距为视口高度的2%和视口宽度的5%，字体大小为视口宽度的2%，背景颜色为#007bff，文字颜色为#fff，去除了边框，设置了鼠标指针为手型。
18. 使用vh和vw单位实现响应式表格布局
表格是网页中常见的展示数据的方式，我们可以使用vh和vw单位来实现响应式的表格布局。下面是一个示例代码：
.table {
width: 80vw;
margin: 2vh auto;
}
.table th, .table td {
padding: 1vh 2vw;
font-size: 1.5vw;
border: 1px solid #ccc;
}
在上面的示例中，我们设置了一个表格的宽度为视口宽度的80%，上下间距为视口高度的2%，左右间距为视口宽度的2%，表头和表格单元格的内边距为视口高度的1%和视口宽度的2%，字体大小为视口宽度的1.5%，边框为1px实线#ccc。
19. 使用vh和vw单位实现响应式图片大小
图片是网页中常见的展示元素，我们可以使用vh和vw单位来实现响应式的图片大小。下面是一个示例代码：
.image {
width: 50vw;
height: 30vh;
object-fit: cover;
}
在上面的示例中，我们设置了一个图片的宽度为视口宽度的50%，高度为视口高度的30%，并使用object-fit属性将图片按比例填充容器。
20. 使用vh和vw单位实现响应式视频播放器
视频播放器是网页中常见的多媒体元素，我们可以使用vh和vw单位来实现响应式的视频播放器。下面是一个示例代码：
.video {
width: 80vw;
height: 45vh;
}
.video video {
width: 100%;
height: 100%;
}
在上面的示例中，我们设置了一个视频播放器的宽度为视口宽度的80%，高度为视口高度的45%，并设置了视频元素的宽度和高度为100%，从而实现了一个响应式的视频播放器。