CSS 响应式设计视口

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

什么是视口？

视口是用户在网页中可见的区域。它会因设备而异，在手机上比在电脑屏幕上更小。在台式机上，视口是窗口的大小，不包括工具栏和其他不是网页一部分的元素。在移动设备上，它是屏幕的大小。

视口类型

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

**布局视口：**它是浏览器用来显示网页的虚拟区域。布局视口可以通过在 HTML 头部添加 meta viewport 标签来控制。

**视觉视口：**它表示当前在屏幕上可见的布局视口的一部分。视觉视口可以通过放大和缩小来更改。

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

设置视口

如上所述，我们可以使用 <meta> 标签来控制视口宽度。您应该在所有网页的头部包含以下 <meta> 视口元素以确保响应性。

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

在上述语法中，“content = width=device-width:”将视口的宽度设置为与设备屏幕宽度相同。“initial-scale = 1.0:”用于将初始缩放级别设置为 100%。

在下面的部分中，我们提供了没有视口 meta 标签的网页示例，以及包含视口 meta 标签的相同网页示例。

带有 Meta 标签的示例

以下代码包含视口 meta 标签，该标签将布局视口宽度设置为等于设备的屏幕宽度。因此，页面具有响应性并适应不同的屏幕尺寸。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        .container {
            width: 90%;
            background-color: lightblue;
            padding: 20px;
            text-align: center;
        }
        .content {
            width: 90%;
            margin: auto;
            background-color: lightcoral;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>Responsive Layout with Viewport Meta Tag</h1>
        <div class="content">
            <p>
                This layout adapts to the device screen width, 
                thanks to the viewport meta tag.
            </p>
        </div>
    </div>
</body>

</html>

没有视口 Meta 标签的示例

以下代码不包含视口 meta 标签，因此整个视口在较小的屏幕上将不可见。在较小的屏幕上会出现水平滚动选项，从而降低用户体验。

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        .container {
            width: 100%;
            background-color: lightblue;
            padding: 20px;
            text-align: center;
        }
        .content {
            width: 90%;
            margin: auto;
            background-color: lightcoral;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>Non-Responsive Layout Without Viewport Meta Tag</h1>
        <div class="content">
            <p>   
                This layout does not adapt to the device screen width, 
                because it lacks the viewport meta tag.
            </p>
        </div>
    </div>
</body>

</html>

与视口相关的 CSS 单位

在 CSS 中，我们可以根据视口尺寸指定元素的尺寸，例如占用视口宽度的 50% 或视口高度的 100%。以下是常用的单位。

**vw（视口宽度）：**此单位基于视口宽度的 1%。例如，“width: 10vw”将等于视口总宽度的 10%。
**vh（视口高度）：**此单位基于视口高度的 1%。例如，“height: 50vh”将是视口高度的一半。
**vmin：**此单位采用视口宽度和高度之间的较小值。当您希望大小适应纵向和横向方向时，这很有用。
**vmax：**此单位采用视口宽度和高度之间的较大值，这对于需要在较大视口中最大化空间的设计很有用。

打印页面