下面是一篇结构完整、示例清晰、可直接用于教程或博客发布的文章，详细讲解 HTML5 的响应式布局方法与示例，适合新手到进阶学习。
HTML5 的响应式布局方法示例详解
一、什么是响应式布局？
响应式布局（Responsive Web Design） 指的是网页能够根据不同设备的屏幕尺寸（手机、平板、电脑）自动调整布局和样式，保证良好的浏览体验。
核心目标：
- 一套代码
- 适配多种屏幕
- 无需为不同设备单独开发页面
二、响应式布局的核心技术
HTML5 响应式布局主要依赖以下几种技术：
- viewport 视口设置
- 媒体查询（Media Queries）
- 弹性布局（Flexbox）
- 网格布局（Grid）
- 百分比 / vw / vh / rem 单位
三、设置 viewport（必不可少）
<meta name="viewport" content="width=device-width, initial-scale=1.0">
作用
- 控制页面在移动设备上的缩放比例
- 防止页面被强制缩放成桌面宽度
📌 没有 viewport，就谈不上真正的响应式
四、媒体查询（Media Queries）
基本语法
@media (max-width: 768px) {
body {
background-color: #f2f2f2;
}
}
常用断点参考
| 设备 | 宽度 |
|---|---|
| 手机 | ≤ 768px |
| 平板 | 768px – 1024px |
| 桌面 | ≥ 1024px |
五、Flex 弹性布局（最常用）
示例：响应式导航栏
<div class="nav">
<div>Home</div>
<div>About</div>
<div>Contact</div>
</div>
.nav {
display: flex;
justify-content: space-around;
}
@media (max-width: 600px) {
.nav {
flex-direction: column;
text-align: center;
}
}
📌 效果
- 桌面端：横向排列
- 手机端：纵向排列
六、Grid 网格布局（复杂布局推荐）
示例：响应式卡片布局
<div class="grid">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
📌 优势
- 自动换行
- 无需媒体查询
- 非常适合商品列表、图片墙
七、百分比 / vw / vh / rem 单位
百分比布局
.box {
width: 50%;
}
vw / vh
.banner {
height: 100vh;
}
rem（推荐）
html {
font-size: 16px;
}
h1 {
font-size: 2rem;
}
📌 rem 适合整体缩放
八、图片响应式处理
方法一：max-width
img {
max-width: 100%;
height: auto;
}
方法二：picture（HTML5）
<picture>
<source media="(max-width:600px)" srcset="small.jpg">
<img src="large.jpg" alt="">
</picture>
九、完整响应式示例（推荐）
HTML
<div class="container">
<div class="box">A</div>
<div class="box">B</div>
<div class="box">C</div>
</div>
CSS
.container {
display: flex;
gap: 10px;
}
.box {
flex: 1;
height: 100px;
background: #4caf50;
}
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}
十、响应式布局最佳实践
✅ 移动端优先（Mobile First）
✅ 使用 Flex / Grid
✅ 少用固定宽高
✅ 多用 rem / %
❌ 避免写死 px
十一、常见误区
❌ 只适配一种分辨率
❌ 媒体查询写太多
❌ 使用 table 布局
❌ 不测试真机
十二、一句话总结
响应式布局 = viewport + 弹性布局 + 媒体查询