CSS 在视觉格式模型中的视口角色

对于任何网页开发人员来说，了解视口在视觉格式模型中的作用对于开发响应式网站至关重要。视口是在浏览器窗口或移动设备屏幕中可见的区域。

在本教程中，我们将通过示例来了解视口在视觉格式模型中的作用。

什么是视觉格式模型

视觉格式模型允许网页浏览器决定如何在网页上显示HTML内容。它为内容提供了可视化显示。

视觉格式模型根据视口区域、其他一些因素和CSS属性（如margin、padding、border等）在网页上显示内容。

视口的作用

视口在视觉格式模型中的主要作用是决定可见区域。随着设备屏幕尺寸的变化，可见区域也会发生变化。

在早期阶段，网页仅适用于计算机。因此，网站不具备响应式设计，但现在，网站60%的流量来自移动设备和平板电脑。因此，需要根据视口区域显示网页内容。

简而言之，我们可以说视口用于决定可见区域，并根据可见区域进行响应式网页设计。

语法

用户可以按照下面的语法将视口添加到网站中。

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

我们可以使用<meta>标签将视口添加到网站中。

属性

Name（名称） − 使用“viewport”值来表示标签作为视口。
Content（内容） − 设置网页的宽度，设置“device-width”值使宽度等于屏幕宽度。
Initial-scale （初始缩放比例） − 根据缩放值放大或缩小网页。

现在，让我们通过示例来了解视口在视觉格式模型中的作用。

示例1

在下面的示例中，我们在父div元素中创建了多个具有不同类名的div元素。还使用meta标签添加了视口。

在CSS中，我们为父div设置了宽度并设置了显示。用户可以更改浏览器窗口的大小，并观察它如何根据浏览器的视口重新排列内容。

<html>
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
      .parent {
         width: 90%;
         display: flex;
         flex-wrap: wrap;
         justify-content: space-evenly;
      }
      .first,
      .second,
      .third,
      .fourth {
         width: 230px;
         height: 100px;
         margin: 20px;
         background-color: aqua;
         border: 2px solid blue;
         border-radius: 12px;
      }
   </style>
</head>
<body>
   <h2>Using the <i> viewport meta tag </i> to make responsive website</h2>
   <div class = "parent">
      <div class = "first"> </div>
      <div class = "second"> </div>
      <div class = "third"> </div>
      <div class = "fourth"> </div>
   </div>
</body>
</html>

示例2

在下面的示例中，我们有一个包含图像和文本的容器div元素。我们添加了CSS代码，使图像占据50%的空间，文本占据40%。

此外，我们使用了媒体查询来为移动设备设计网页。用户可以在移动设备和桌面设备上观察输出。同时，还请观察在下面的代码中删除视口后的输出。

<html>
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
      .container {
         width: 90%;
         margin: 0 auto;
         border: 1px solid black;
         padding: 10px;
         display: flex;
      }
      .image {width: 50%; margin-right: 3%;}
      .text {
         width: 40%;
         font-size: 1.5rem;
         padding: 20px;
         margin-left: 3%;
      }
      img {width: 100%; height: 300px;}
      /* media query for mobile devices */
      @media (max-width: 600px) {
         .container {flex-direction: column;}
         .image {width: 100%; margin-right: 0; margin-bottom: 20px;}
         .text {width: 90%; margin-left: 0;}
      }
   </style>
</head>
<body>
   <h2>Using the <i> viewport meta tag </i> to make responsive website</h2>
   <div class = "container">
      <div class = "image">
         <img src = "https://picsum.photos/seed/picsum/200/300" alt = "Random image">
      </div>
      <div class = "text">
         The image is picked up from the picsum website. It allows us to get random image of specified dimensions. Change the viewport size of your browser to checkout the responsive design.
      </div>
   </div>
</body>
</html>