HTML 中的响应式设计
1 viewport 元标签
在 HTML 中，响应式设计 的一个关键部分是 设置 viewport 元标签。它用于控制页面在 移动设备 浏览器 中的 可视区域。
<head>
<meta name="viewport" content="width=device - width, initial - scale=1.0">
</head>
上面的 viewport 元标签 告诉 浏览器，页面的宽度 应该等于 设备的宽度，并且初始 缩放比例 为 1.0。这是实现 移动设备上 响应式设计 的重要第一步，确保 页面能够以 合适的大小 显示在 小屏幕设备上。
2 流体网格布局（Fluid Grid）
构建 流体网格 是 响应式 HTML 设计 的 重要策略。通过将网页 划分为基于 百分比 的 列 和 行，可以使 布局 根据 屏幕大小 自动调整。
.column {
float: left;
width: 50%;
box-sizing: border-box;
}
这里的 .column 类 应用于 HTML 中的元素（如 <div class="column"> ）：
width: 50%;使得 每个列 占据 容器宽度 的 50%；box-sizing: border-box;属性 确保 元素的 宽度计算 包括 边框和内边距，从而在 不同屏幕尺寸下 更合理地 分配空间。
3 响应式图像
在 HTML 中，可以使用 srcset 属性 和 <picture> 元素 来实现 响应式图像。
srcset 属性
srcset 属性 允许为 不同的 设备像素密度（DPI）或 屏幕宽度 提供 不同的图像源。例如：
<img
src="image-small.jpg"
srcset="image-medium.jpg 1.5x, image-large.jpg 2x"
alt="这是一张响应式图像">
上面代码，当设备 像素密度 为：
- 1.5 倍时，使用
image-medium.jpg； - 2 倍时，使用
image-large.jpg。
<picture> 元素
<picture> 元素 则更加灵活，它可以根据 不同的 媒体条件（如屏幕宽度）选择 不同的 图像源，例如：
<picture>
<source media="(max-width: 600px)" srcset="small-image.jpg">
<source media="(max-width: 1200px)" srcset="medium-image.jpg">
<img src="large-image.jpg" alt="这是一张根据屏幕宽度选择的图像">
</picture>
4 媒体查询 @media screen and (min-width/max-width: ...)
媒体查询 在 HTML 响应式设计中 主要通过 CSS 与 HTML 元素相结合。在 CSS 文件 或 <style> 标签内，可以根据 不同的媒体条件 来 修改 HTML 元素的 样式。
例如，当屏幕尺寸较小（如手机屏幕）时，可以改变 导航栏 的 显示方式，从 水平排列 变为 垂直堆叠：
@media screen and (max-width: 768px) {
nav ul {
flex-direction: column;
}
}
这里的 nav ul 是 HTML 中的 导航栏列表（<nav><ul>...</ul></nav>），当 屏幕宽度 小于等于 768px 时，其内部的 子元素（列表项）flex - direction: column; 将以 垂直方向 排列。
在屏幕媒体类型下，可以根据 屏幕大小 调整 段落的 字体大小 和 行间距：
@media screen and (min-width: 1200px) {
p {
font-size: 18px;
line-height: 1.6;
}
}
@media screen and (max-width: 768px) {
p {
font-size: 14px;
line-height: 1.4;
}
}
