响应式设计是现代网页开发的重要组成部分，它确保网页在不同设备和屏幕尺寸上都能良好显示。本教程将介绍 CSS3 中的响应式设计基础。

响应式布局的关键技术

  1. 媒体查询（Media Queries） 媒体查询是 CSS3 中实现响应式设计的关键技术。它允许你根据不同的设备特征应用不同的样式规则。

    @media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

  2. 弹性盒模型（Flexbox） 弹性盒模型提供了一种更加灵活的方式来布局、对齐和分配容器内元素的空间，即使它们的大小是未知或动态的。

    .container {
  display: flex;
  justify-content: space-between;
}

  3. 网格布局（Grid） 网格布局提供了一种二维布局系统，可以创建复杂的页面布局。

    .grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
}

实例：创建一个响应式导航栏

以下是一个简单的响应式导航栏实例，它会在屏幕宽度小于 600px 时变为堆叠布局。

<nav class="navbar">
  <a href="/Community/Tutorials/Web_Development/HTML_Basics">HTML 基础</a>
  <a href="/Community/Tutorials/Web_Development/CSS3_Basics">CSS3 基础</a>
  <a href="/Community/Tutorials/Web_Development/JavaScript_Basics">JavaScript 基础</a>
</nav>

<style>
  .navbar {
    display: flex;
    justify-content: space-around;
  }

  @media screen and (max-width: 600px) {
    .navbar {
      flex-direction: column;
    }
  }
</style>

扩展阅读

想要了解更多关于响应式设计的知识，可以阅读我们的深入理解响应式设计教程。

深入理解响应式设计

图片展示

响应式设计的关键在于适应不同的屏幕尺寸。以下是一些展示响应式设计的图片。

Smartphone
Tablet
Laptop