CSS 视口单位
介绍
CSS 视口单位是 CSS3 中引入的一组相对单位，基于浏览器视口的大小。这些单位提供了一种创建自动适应屏幕大小的布局的方法，使它们成为响应式网页设计的必备工具。在本章中，我们将探讨 CSS 中可用的不同视口单位以及如何在设计中有效地使用它们。
核心知识点
视口单位类型
1. 基本视口单位
vw（视口宽度）：1vw 等于视口宽度的 1%vh（视口高度）：1vh 等于视口高度的 1%vmin（视口最小值）：1vmin 等于视口较小维度（宽度或高度）的 1%vmax（视口最大值）：1vmax 等于视口较大维度（宽度或高度）的 1%
2. 视口单位与其他相对单位
%（百分比）：相对于父元素的大小em：相对于元素的字体大小rem：相对于根元素的字体大小vw/vh：相对于视口大小
视口单位概念
1. 视口定义
- 视口是浏览器中网页的可见区域
- 它根据设备大小和方向而变化
- 它不包括浏览器 UI 元素，如地址栏或工具栏
2. 动态特性
- 当视口大小改变时，视口单位会自动调整
- 它们响应窗口大小调整和设备方向变化
- 它们提供了创建真正流畅布局的方法
3. 浏览器支持
- 支持所有现代浏览器
- 在旧浏览器中支持有限（IE9+ 部分支持）
实用示例
示例 1：基本视口单位使用
/* 使用视口单位进行大小调整 */
.viewport-box {
width: 50vw; /* 视口宽度的 50% */
height: 50vh; /* 视口高度的 50% */
background-color: #3498db;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 5vw; /* 字体大小相对于视口宽度 */
}
/* 使用 vmin 和 vmax */
.viewport-circle {
width: 50vmin; /* 视口较小维度的 50% */
height: 50vmin; /* 视口较小维度的 50% */
border-radius: 50%;
background-color: #e74c3c;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 5vmin; /* 字体大小相对于视口较小维度 */
}示例 2：全屏高度部分
/* 全屏高度部分 */
.section {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 20px;
}
/* 不同背景的部分 */
.section-1 {
background-color: #3498db;
color: white;
}
.section-2 {
background-color: #2ecc71;
color: white;
}
.section-3 {
background-color: #e74c3c;
color: white;
}
/* 部分内容 */
.section-content {
max-width: 800px;
}
.section h2 {
font-size: 8vw;
margin-bottom: 20px;
}
.section p {
font-size: 3vw;
margin-bottom: 30px;
}示例 3：响应式排版
/* 使用视口单位的响应式排版 */
.responsive-text {
font-size: clamp(1rem, 4vw, 3rem);
line-height: 1.5;
}
/* 不同文本元素的视口基础大小 */
h1 {
font-size: 10vw;
margin-bottom: 1rem;
}
h2 {
font-size: 8vw;
margin-bottom: 0.8rem;
}
h3 {
font-size: 6vw;
margin-bottom: 0.6rem;
}
p {
font-size: 4vw;
margin-bottom: 1rem;
line-height: 1.6;
}
/* 响应式间距 */
.spacing {
margin-top: 5vh;
margin-bottom: 5vh;
padding: 3vh 3vw;
}示例 4：基于视口的网格布局
/* 基于视口的网格布局 */
.viewport-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(30vw, 1fr));
gap: 2vw;
padding: 2vw;
}
.grid-item {
background-color: #f8f9fa;
border: 1px solid #ddd;
border-radius: 8px;
padding: 2vw;
text-align: center;
transition: transform 0.3s ease;
}
.grid-item:hover {
transform: translateY(-10px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.grid-item h3 {
font-size: 4vw;
margin-bottom: 1vw;
}
.grid-item p {
font-size: 3vw;
margin-bottom: 2vw;
}示例 5：使用视口单位的英雄区
/* 使用视口单位的英雄区 */
.hero {
height: 100vh;
background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('hero-image.jpg');
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: white;
padding: 0 5vw;
}
.hero-content {
max-width: 1200px;
}
.hero h1 {
font-size: 12vw;
margin-bottom: 3vh;
text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.hero p {
font-size: 5vw;
margin-bottom: 5vh;
text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.hero button {
font-size: 4vw;
padding: 2vh 4vw;
background-color: #3498db;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.hero button:hover {
background-color: #2980b9;
}示例 6：使用视口单位的粘性导航
/* 使用视口单位的粘性导航 */
.navbar {
position: sticky;
top: 0;
background-color: white;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
padding: 2vh 3vw;
z-index: 1000;
}
.navbar-container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
}
.navbar-logo {
font-size: 5vw;
font-weight: bold;
color: #3498db;
}
.navbar-menu {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.navbar-item {
margin-left: 3vw;
}
.navbar-link {
text-decoration: none;
color: #333;
font-size: 3vw;
transition: color 0.3s ease;
}
.navbar-link:hover {
color: #3498db;
}
/* 响应式菜单 */
@media (max-width: 768px) {
.navbar-menu {
display: none;
}
.navbar-toggle {
display: block;
font-size: 5vw;
cursor: pointer;
}
}示例 7：使用视口单位的模态对话框
/* 使用视口单位的模态对话框 */
.modal {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 2000;
}
.modal-content {
background-color: white;
border-radius: 8px;
padding: 5vh 5vw;
max-width: 90vw;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 3vh;
}
.modal-title {
font-size: 6vw;
margin: 0;
}
.modal-close {
font-size: 6vw;
background: none;
border: none;
cursor: pointer;
color: #999;
transition: color 0.3s ease;
}
.modal-close:hover {
color: #333;
}
.modal-body {
margin-bottom: 3vh;
}
.modal-body p {
font-size: 4vw;
line-height: 1.6;
}
.modal-footer {
display: flex;
justify-content: flex-end;
gap: 2vw;
}
.modal-button {
font-size: 4vw;
padding: 2vh 4vw;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.modal-button-primary {
background-color: #3498db;
color: white;
}
.modal-button-primary:hover {
background-color: #2980b9;
}
.modal-button-secondary {
background-color: #95a5a6;
color: white;
}
.modal-button-secondary:hover {
background-color: #7f8c8d;
}实践练习
练习 1：创建全屏登录页面
创建一个全屏登录页面，具有以下特点：
- 一个占据整个视口高度的英雄区
- 随视口大小缩放的响应式排版
- 基于视口大小的号召性按钮
- 覆盖整个视口的背景图像
- 在不同屏幕尺寸上可读的文本内容
练习 2：创建响应式卡片网格
创建一个响应式卡片网格，具有以下特点：
- 根据视口宽度自动调整大小的卡片
- 适应不同屏幕尺寸的网格布局
- 卡片之间的响应式间距
- 带有基于视口的排版的卡片内容
- 卡片的悬停效果
练习 3：创建流畅排版比例
创建一个流畅排版比例，具有以下特点：
- 不同标题级别使用基于视口的大小
- 段落文本使用基于视口的大小
- 不同文本元素之间的一致比例
- 确保文本在小屏幕和大屏幕上都保持可读性
- 使用
clamp()函数设置最小和最大字体大小
总结
在本章中，我们探讨了 CSS 视口单位，它们是创建适应浏览器视口大小的响应式布局的强大工具。我们涵盖了：
- 不同的视口单位：
vw、vh、vmin和vmax - 视口单位如何与其他相对单位（如百分比、em 和 rem）比较
- 视口单位在全屏高度部分、响应式排版和网格布局中的实际应用
- 使用视口单位创建复杂组件，如英雄区、导航栏和模态对话框
- 实践练习，以在实际场景中练习使用视口单位
视口单位提供了创建真正流畅设计的方法，这些设计会自动适应不同的屏幕大小。当与媒体查询和弹性盒/网格布局等其他响应式设计技术结合使用时，它们可以帮助您创建在所有设备上都看起来很棒的网站。但是，重要的是要谨慎使用它们，并在不同屏幕尺寸上测试您的设计，以确保它们保持可用和视觉吸引力。
复习问题
- CSS 中的四个主要视口单位是什么？
vw和vh有什么区别？vmin和vmax有什么区别？- 视口单位与百分比单位如何比较？
- 使用视口单位进行排版的优势是什么？
- 如何确保使用视口单位时文本在小屏幕和大屏幕上都保持可读性？
- 视口单位的一些常见用例是什么？
- 当设备方向改变时，视口单位如何表现？