上查看所有课程
响应式网页设计是一种网页设计方法，旨在使网页在具有不同屏幕尺寸和视口的所有设备上都能良好呈现。例如，
这是一个网站在桌面设备上的外观。
这是同一网站在移动设备上的外观。
在这里，网页的所有内容在桌面和移动设备上都能良好呈现，没有任何问题。因此，这是一种响应式设计。
创建响应式设计
有许多方法可以使网页具有响应性。它们如下：
- 视口 meta 标签
- 响应式排版
- 响应式图片
- 媒体查询
- 响应式布局技术
我们将详细了解它们中的每一个。
视口 Meta 标签
我们可以将 viewport 添加到 <meta> 标签中，使网页具有响应性。视口指示浏览器如何控制页面的尺寸和缩放。例如，
<meta name="viewport" content="width=device-width, initial-scale=1">viewport 属性告诉浏览器如何调整网页的尺寸和缩放以适应设备的屏幕。在此示例中，
width=device-width- 网页的宽度等于设备的宽度initial-scale=1.0- 缩放级别为 100%。
我们来看一个例子
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Example with viewport meta tag</title>
</head>
<body>
<img
width="300"
src="https://programiz.com/sites/all/themes/programiz/assets/cover-artwork.png"
/>
<h1>Viewport Set</h1>
</body>
</html>设置视口 meta 后移动屏幕上的浏览器输出
未设置视口 meta 时移动屏幕上的浏览器输出
如您所见，未设置视口时，网站在移动设备上不友好。
响应式文本大小
我们可以根据浏览器大小设置文本大小。我们为此目的使用 vw 单位。例如，
<h1 style="font-size:10vw">Hi everyone!</h1>浏览器输出
在这里，font-size 属性设置为 10vw，表示 视口宽度的 10%。
这意味着 <h1> 元素的字体大小将是视口宽度（网页的可见区域）的 10%，无论设备的屏幕大小或分辨率如何。
当我们调整浏览器窗口大小时，页面上文本和其他元素的大小通常会按比例放大或缩小以适应新的窗口大小。这使得内容无论用户显示器的大小如何，都易于阅读和访问。
浏览器输出
响应式图片
响应式图片在任何浏览器大小下都能良好呈现并适应。我们只需将图片的宽度设置为 100% 即可使图片具有响应性。例如，
<img src="https://cdn.programiz.com/sites/tutorial2program/files/sp_logo.svg" style="width: 100%;" />浏览器输出（桌面）
浏览器输出（移动）
HTML 图片标签
<picture> 元素允许您指定多个 <source> 元素，每个元素都可以有自己的媒体查询。这使您可以根据屏幕大小、分辨率和其他因素向不同设备提供不同的图片。例如，
<picture>
<source srcset="logo_small.png" media="(max-width: 400px)">
<source srcset="logo_regular.png">
<img src="logo_regular.png" alt="Logo">
</picture>屏幕尺寸 > 400px 时的浏览器输出
屏幕尺寸 < 400px 时的浏览器输出
在上面的示例中，如果屏幕宽度小于 400，将使用 logo_small.png；如果屏幕尺寸大于 400，将使用 logo_regular.png。
这通常用于响应式设计，以提供不同大小或分辨率的多个图片，以便为当前视口宽度选择最佳图片。这使开发人员可以更好地控制图片在不同设备和屏幕尺寸上的显示方式。
注意：我们还在 <picture> 标签内提供了一个 <img> 标签，用于不支持 <picture> 标签的旧版浏览器。
媒体查询
媒体查询是一种 CSS 技术，它为不同的浏览器大小定义完全不同的样式。它是响应式设计的重要组成部分。让我们看一个例子，
<h1>Learn about HTML</h1>
<style>
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
</style>浏览器输出（屏幕尺寸 > 600）
1243
在这里，我们可以看到我们的 HTML 页面不受 CSS 的影响。让我们将屏幕大小调整到小于 600px。
浏览器输出（屏幕尺寸 < 600）
上面的示例使用媒体查询（由 @media 表示）将特定样式应用于页面。
only screen 确保样式仅在页面在屏幕上查看时应用，而不是在打印时应用。查询的 (max-width: 600px) 部分将样式的应用限制为仅在屏幕尺寸小于 600 像素时。这允许动态和响应式布局。
网格布局
网站可以使用灵活的网格系统，而不是使用固定宽度的布局容器，该系统会自动调整大小以适应可用的屏幕空间。
网格布局是一种 CSS 布局，允许您创建响应式和灵活的布局。使用网格布局，我们可以使用网格系统指定网页上元素的大小和位置，元素将自动调整其大小和位置以适应可用空间。
响应式网格视图通常有 12 列，总宽度为 100%。网格将自动调整大小，以在不同设备上占据屏幕宽度的不同百分比。例如，
<style>
.grid {
display: flex;
flex-wrap: wrap;
}
.column {
flex: 0 0 8.33%; /* Take up 8.33% of the grid (12 columns) */
background-color: red;
color: white;
text-align: center;
font-family: sans-serif;
}
.column:nth-child(2n) {
background-color: blue;
}
/* Use media queries to apply different styles based on screen width */
@media (max-width: 600px) {
.column {
flex: 0 0 50%; /* Take up 50% of the grid on small screens */
}
}
</style>
<div class="grid">
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
<div class="column">4</div>
<div class="column">5</div>
<div class="column">6</div>
<div class="column">7</div>
<div class="column">8</div>
<div class="column">9</div>
<div class="column">10</div>
<div class="column">11</div>
<div class="column">12</div>
</div>浏览器输出（屏幕尺寸 > 600px）
浏览器输出（屏幕尺寸 < 600px）
在上面的代码中，
.grid {
display: flex;
flex-wrap: wrap;
}这里，
display: flex- 为元素创建灵活容器flex-wrap: wrap- 如果需要，将项目换行到多行以适应容器。
然后注意，
.column {
flex: 0 0 8.33%; /* Take up 8.33% of the grid (12 columns) */
}这里，flex: 0 0 8.33% - 将 flex-grow、flex-shrink 和 flex-basis 属性分别设置为 0、0 和 8.33%，其中 8.33% 表示列将占据的大小，即屏幕的 1/12。我们将在 CSS 教程中了解更多信息。
然后，
@media (max-width: 600px) {
.column {
flex: 0 0 50%; /* Take up 50% of the grid on small screens */
}
}在这里，当屏幕尺寸小于 600px 时，代码生效，这将每列的宽度变为 50%，以便在较小的屏幕上，每列占据屏幕的一半。