下面是一篇结构完整、示例清晰、可直接用于教程或博客发布的文章，详细讲解 HTML5 的响应式布局方法与示例，适合新手到进阶学习。

HTML5 的响应式布局方法示例详解

一、什么是响应式布局？

响应式布局（Responsive Web Design） 指的是网页能够根据不同设备的屏幕尺寸（手机、平板、电脑）自动调整布局和样式，保证良好的浏览体验。

核心目标：

  • 一套代码
  • 适配多种屏幕
  • 无需为不同设备单独开发页面

二、响应式布局的核心技术

HTML5 响应式布局主要依赖以下几种技术：

  1. viewport 视口设置
  2. 媒体查询（Media Queries）
  3. 弹性布局（Flexbox）
  4. 网格布局（Grid）
  5. 百分比 / 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 + 弹性布局 + 媒体查询