菜鸟教程
教程 css tutorial

视口单位

视口单位是一种基于浏览器窗口大小的相对单位，常用于实现响应式布局和自适应排版。

1. 常见视口单位

单位 含义
vw 相对于视口宽度（1vw = 1% 的宽度）
vh 相对于视口高度（1vh = 1% 的高度）
vmin 视口宽度和高度中较小的那一个
vmax 视口宽度和高度中较大的那一个

2. 使用场景

  • 页面横幅、全屏布局等
  • 字体、间距自适应视口变化
  • 移动端适配

示例

css 
.banner {
  height: 100vh;
  width: 100vw;
  background: linear-gradient(to right, #2196f3, #21cbf3);
}

上述代码将 .banner 设置为全屏大小，随窗口变化自适应。

视口单位示例

在线代码演示
源码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
<meta charset="UTF-8" />
<title>CSS 视口单位示例</title>
<style>
body,
html {
margin: 0;
padding: 0;
height: 100px;
}


.viewport-box {
  width: 80vw;
  height: 60vh;
  background-color: #aed581;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 5vmin;
  color: #33691e;
  margin: 5vh auto;
  border-radius: 10px;
}



</style>
</head>


<body>
<div class="viewport-box">我是视口单位盒子</div>
</body>


</html>

相关内容