CSS RWD 视口

在响应式网页设计中，视口是浏览器用来渲染网页的虚拟区域。视口对于网页开发和创建适应各种设备和屏幕尺寸的响应式设计至关重要。

视口也可以指定为网页的用户可见区域，该区域由设备的屏幕决定尺寸及其分辨率。在桌面上，视口是窗口的大小，不包括工具栏和不属于网页一部分的其他元素。在移动设备上，它是屏幕的大小。

CSS RWD 视口类型

视口主要有两种类型，如下所示:

布局视口:浏览器用来显示网页的虚拟区域。布局视口通过在 HTML head 部分添加元视口标签来控制。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

在上述语法中，content="width=device-width 表示视口的宽度应设置为设备屏幕的宽度，initial-scale=1.0用于设置初始缩放级别。

Visual Viewport:表示当前布局视口的部分在屏幕上可见。视觉视口可以在放大和缩小时更改。

两个视口都是可变的，这意味着两者的尺寸都可以在加载后更改

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>

在上面的例子中，添加了一个媒体查询来设置flex的方向为column，当屏幕尺寸减小到550px时，否则flex的方向为排成一行。

CSS RWD 视口 类型

CSS RWD 视口 设置

CSS RWD 视口类型

CSS RWD 视口设置