8、网页响应式改造：AWD 与 RWD 技术详解

最新推荐文章于 2025-11-24 14:03:57 发布

脸先着地天使

最新推荐文章于 2025-11-24 14:03:57 发布

阅读量15

点赞数

CC 4.0 BY-SA版权

分类专栏：掌握响应式设计精髓文章标签： AWD RWD 响应式设计

本文链接：https://blog.youkuaiyun.com/jwt8token/article/details/155174887

掌握响应式设计精髓专栏收录该内容

19 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

网页响应式改造：AWD 与 RWD 技术详解

1. 基础布局搭建

在开始响应式改造之前，我们需要先搭建基础的 HTML 和 CSS 布局。以下是基础页面的 HTML 代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Retrofitting with Adaptive Web Design</title>
    <link href="css/styles.css" rel="stylesheet">
</head>
<body>
    <main class="container_12 clear">
      <header class="grid_12">Header</header>
      <nav class="grid_3">Nav</nav>
      <section class="grid_9">Content</section>
      <footer class="grid_12">Footer</footer>
    </main>
</body>
</html>

在这个布局中，白色的间隔（gutter）宽度为 20px，即导航栏右侧有 10px 的外边距，内容区域左侧有 10px 的外边距。整体布局宽度为 960px，计