在响应式 Web 设计的上下文中，视口是浏览器用来呈现网页的虚拟区域。视口对于 Web 开发和创建适应各种设备和屏幕尺寸的响应式设计至关重要。
视口也可以指定为用户的网页可见区域，该区域由设备的屏幕大小和分辨率确定。在桌面上，视口是窗口的大小，不包括工具栏和不属于网页一部分的其他元素。在移动设备上，它是屏幕的大小。
CSS RWD 视口 - 类型
视口主要有两种类型，分别如下：
布局视口：它是浏览器用来显示网页的虚拟区域。布局视口是通过在 HTML head 部分添加 meta viewport 标签来控制的。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
在上面的语法中，content=“width=device-width 表示视口的宽度应设置为设备屏幕的宽度，initial-scale=1.0 用于设置初始缩放级别。
视觉视口：它表示当前在屏幕上可见的布局视口部分。可以在放大和缩小时更改视觉视口。两个视口都是可变的，这意味着在加载页面后，可以更改两者的尺寸。
CSS RWD 视口 - 设置
如上所述，在布局视口中，可以使用 <meta> 标签来设置视口。在每个页面上使用 <meta> 标签。为浏览器提供控制页面尺寸和缩放的指令。
请参阅下面给出的示例，了解如何设置视口，并根据视口的大小，更改内容。更改视口大小以查看效果。
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#card-container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 500px;
}
@media screen and (max-width: 550px){
#card-container {
flex-direction: column
}
}
.card {
width: 100px;
height: 80px;
border: 1px solid black;
border-radius: 10px;
background-color: aquamarine;
text-align: center;
font-size: 4em;
}
</style>
</head>
<body>
<div id="card-container">
<div class="card">
<span class="card-number">1</span>
</div>
<div class="card">
<span class="card-number">2</span>
</div>
<div class="card">
<span class="card-number">3</span>
</div>
</div>
</body>
</html>
在上面的示例中，添加了一个媒体查询，当屏幕尺寸减小到 550px 时，将 flex 的方向设置为列，否则 flex 方向在行中。
