Articles
CSS简介
视口与响应式设计

视口与响应式设计

本文介绍了视口和响应式设计。

你将学习如何使用 <meta> 标签设置视口，以及它为何重要。

YouTube Video

预览的HTML

css-responsive-viewport.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>CSS Properties Example</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-responsive-viewport.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Properties For Responsive Design</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>Viewport Properties</h2>
20        </header>
21        <article>
22            <h3>Viewport Example</h3>
23            <section>
24                <header><h4>HTML</h4></header>
25                <pre>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</pre>
26            </section>
27        </article>
28        <article>
29            <h3>width</h3>
30            <section>
31                <header><h4>HTML</h4></header>
32                <pre>&lt;meta name="viewport" content="width=device-width"&gt;</pre>
33            </section>
34        </article>
35        <article>
36            <h3>height</h3>
37            <section>
38                <header><h4>HTML</h4></header>
39                <pre>&lt;meta name="viewport" content="height=device-height"&gt;</pre>
40            </section>
41        </article>
42        <article>
43            <h3>initial-scale</h3>
44            <section>
45                <header><h4>HTML</h4></header>
46                <pre>&lt;meta name="viewport" content="initial-scale=1.0"&gt;</pre>
47            </section>
48        </article>
49        <article>
50            <h3>minimum-scale</h3>
51            <section>
52                <header><h4>HTML</h4></header>
53                <pre>&lt;meta name="viewport" content="minimum-scale=0.5"&gt;</pre>
54            </section>
55        </article>
56        <article>
57            <h3>maximum-scale</h3>
58            <section>
59                <header><h4>HTML</h4></header>
60                <pre>&lt;meta name="viewport" content="maximum-scale=2.0"&gt;</pre>
61            </section>
62        </article>
63        <article>
64            <h3>user-scalable</h3>
65            <section>
66                <header><h4>HTML</h4></header>
67                <pre>&lt;meta name="viewport" content="user-scalable=no"&gt;</pre>
68            </section>
69        </article>
70        <article>
71            <h3>Viewport Common Examples 1</h3>
72            <section>
73                <header><h4>HTML</h4></header>
74                <pre>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</pre>
75            </section>
76        </article>
77        <article>
78            <h3>Viewport Common Examples 2</h3>
79            <section>
80                <header><h4>HTML</h4></header>
81<pre>
82&lt;meta name="viewport"
83      content="width=device-width, initial-scale=1.0, user-scalable=no"&gt;
84</pre>
85            </section>
86        </article>
87        <article>
88            <h3>Viewport Common Examples 3</h3>
89            <section>
90                <header><h4>HTML</h4></header>
91                <pre>&lt;meta name="viewport" content="width=1024, initial-scale=1.0"&gt;</pre>
92            </section>
93        </article>
94    </main>
95</body>
96</html>

关于在 HTML 中设置 viewport

viewport 设置用于控制显示网页的设备的显示区域（视口）的相关信息。特别是在调整移动设备上的网页显示时，它起到了重要作用。

什么是视口？

视口是指用户浏览网页时，浏览器窗口或设备的显示区域。在桌面设备上，浏览器窗口的大小即为视口，而在智能手机和平板等移动设备上，设备的屏幕大小即为视口。

指定视口

要控制视口，可以在 HTML 中使用 <meta> 标签配置视口设置。此设置允许您指定页面在不同设备上的显示方式。

基本语法 

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

这段代码将视口宽度设置为与设备的宽度相匹配，并将页面的初始显示比例（缩放级别）设置为 1.0（100% 显示）。

viewport 的主要属性

viewport 的 content 属性主要可以指定以下内容：。

  1. width

    • 通过 width 指定视口的宽度。通过将其设置为 device-width，视口会调整为设备的物理宽度（像素）。
    • 示例：width=device-width

  2. height

    • 通过 height 指定视口的高度，但通常只设置宽度，很少指定高度。通过将其设置为 device-height，视口会与设备的物理高度（像素）相匹配。
    • 示例：height=device-height

  3. initial-scale

    • 通过 initial-scale 指定页面的初始缩放级别。1.0 表示设备的 100% 缩放级别。
    • 例如：initial-scale=1.0

  4. minimum-scale

    • 为 minimum-scale 指定最小缩放比例，用于缩小页面。通过将其设置为 0.5，您可以将页面缩小到 50%。
    • 例如：minimum-scale=0.5

  5. maximum-scale

    • 为 maximum-scale 指定最大缩放比例，用于放大页面。通过将其设置为 2.0，您可以将页面放大至 200%。
    • 例如：maximum-scale=2.0

  6. user-scalable

    • 为 user-scalable 指定用户是否可以缩放页面。使用 yes 或 no 指定。
    • 例如：设置 user-scalable=no 可禁用用户缩放功能。

常用示例

  1. 标准响应式设置
1<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • 此设置会自动调整页面以匹配移动设备的屏幕宽度，并确保页面以 100% 的缩放级别显示。这是响应式设计的基础设置。
  1. 禁用缩放
1<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  • 此设置禁用用户缩放功能。当缩放对于特定设计不必要或缩放操作可能导致设计破损时，可使用此设置。
  1. 固定缩放级别和视口宽度
1<meta name="viewport" content="width=1024, initial-scale=1.0">
  • 此设置将视口宽度固定为 1024 像素，并在初始显示时设置缩放级别为 100%。当您希望页面宽度不随设备宽度变化时，可使用此设置。

viewport 的作用

设置 viewport 对于优化显示至关重要，尤其是在移动设备上。通过正确配置视口，您可以避免以下问题：。

  • 防止页面超出设备宽度，以避免用户需要滚动查看。
  • 防止文本和图像变得太小而难以阅读。
  • 防止整个页面被缩小，导致难以交互。

总结

  • viewport 用于控制显示网页的设备的显示区域。
  • 它主要用于适应移动设备的显示，并在响应式设计中起重要作用。
  • 在标准响应式网页设计中，常用像 width=device-width 和 initial-scale=1.0 这样的设置。

正确设置 viewport 可以为移动用户提供舒适的浏览体验。

您可以在我们的YouTube频道上使用Visual Studio Code跟随上述文章进行学习。 请也查看我们的YouTube频道。

YouTube Video

CSS中的响应式设计概述`@media` 与响应式设计