HTML 响应式网页设计
- 响应式网页设计目的：使网页在不同屏幕尺寸和设备上均能良好显示，通过调整布局、图片和文本大小实现。
- 实现响应式设计的关键技术：包括使用视口元标签来控制布局缩放、媒体查询来应用不同屏幕尺寸的特定样式、以及响应式图片和字体大小的适应性调整。
- 响应式网格布局：使用网格布局和柔性盒子（flexbox）模型在不同屏幕尺寸下实现内容布局的灵活排列和适应。
响应式网页设计是一种网页设计方法，旨在使网页在不同屏幕尺寸和视口的所有设备上都能良好呈现。例如，
这是一个网站在桌面上的样子。
这是同一个网站在移动设备上的样子。
这里，网页的所有内容在桌面和移动设备上都能良好呈现，没有任何问题。因此，这是一种响应式设计。
创建响应式设计
有许多方法可以使网页响应式。它们包括：
- 视口元标签（Viewport meta tag）
- 响应式排版（Responsive typography）
- 响应式图片（Responsive images）
- 媒体查询（Media Queries）
- 响应式布局技术（Responsive layout technologies）
我们将详细了解每一种方法。
viewport 元标签
我们可以在 <meta> 标签中添加 viewport 来使网页响应式。viewport 指示浏览器如何控制页面的尺寸和缩放。例如，
<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>使用 viewport 元标签的示例</title>
</head>
<body>
<img
width="300"
src="https://mashangxue123.com/sites/all/themes/mashangxue123/assets/cover-artwork.png"
/>
<h1>设置了 viewport</h1>
</body>
</html>
在设置了 viewport 元标签的移动屏幕上的浏览器输出
在未设置 viewport 元标签的移动屏幕上的浏览器输出
当没有设置视口时，您会看到网站在移动设备上的用户体验不佳。
响应式文本大小
我们可以根据浏览器大小设置文本大小。为此，我们使用 vw 单位。例如，
<h1 style="font-size:10vw">大家好！</h1>
浏览器输出
这里，字体大小属性设置为 10vw，即 视口宽度的10%。
这意味着 <h1> 元素的字体大小将是视口宽度（网页的可见区域）的 10%，无论设备的屏幕尺寸或分辨率如何。
当我们调整浏览器窗口大小时，页面上的文本和其他元素的大小通常会相应地放大或缩小，以适应新窗口大小。这使得内容无论用户显示屏的大小如何，都能被轻松阅读和访问。
浏览器输出
响应式图片
响应式图片在任何浏览器尺寸下都能很好地呈现并适应。我们只需将图片宽度设置为 100%，即可使图片响应式。例如，
<img
src="https://www.mashangxue123.com/files/sp_logo.svg"
style="width: 100%;"
/>
浏览器输出（桌面）
**
**
浏览器输出（移动）
HTML Picture 标签
<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> 标签的旧浏览器，我们在 <picture> 标签内还提供了一个 <img> 标签。
媒体查询
媒体查询是一种 CSS 技术，用于为不同浏览器尺寸定义完全不同的样式。它是响应式设计的重要组成部分。让我们看一个例子，
<h1>了解 HTML</h1>
<style>
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
</style>
浏览器输出（屏幕尺寸 > 600）
1243
这里，我们可以看到 CSS 并未影响我们的 HTML 页面。让我们将屏幕尺寸调整到小于 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%; /* 占网格的8.33%（12列） */
background-color: red;
color: white;
text-align: center;
font-family: sans-serif;
}
.column:nth-child(2n) {
background-color: blue;
}
/* 使用媒体查询根据屏幕宽度应用不同的样式 */
@media (max-width: 600px) {
.column {
flex: 0 0 50%; /* 在小屏幕上占网格的50% */
}
}
</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%; /* 占网格的8.33%（12列） */ }
这里，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%; /* 在小屏幕上占网格的50% */
} }
这里，当屏幕尺寸小于 600px 时，代码生效，将每个列的宽度调整为 50%，以便在较小屏幕上，每列占据半个屏幕大小。