第八章：响应式设计

响应式设计是一种网页设计理念，使网页在不同设备和屏幕尺寸上都能够有良好的显示效果。通过响应式设计，网站能够自动调整布局和样式，以适应用户的设备，提供最佳的用户体验。

1. 媒体查询

1.1 媒体查询的基本语法

媒体查询（Media Queries）是响应式设计的核心技术之一。它允许我们根据设备的特性（如宽度、高度、分辨率等）来应用不同的样式。

媒体查询的基本语法如下：

@media (条件) {
  /* 样式规则 */
}

示例：

/* 当屏幕宽度小于等于600像素时，应用以下样式 */
@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

1.2 常见媒体查询示例

1.2.1 针对不同设备宽度的媒体查询

通过设置不同的max-width或min-width，我们可以为不同设备宽度定义不同的样式：

/* 手机屏幕 */
@media (max-width: 600px) {
  body {
    background-color: lightcoral;
  }
}

/* 平板屏幕 */
@media (min-width: 601px) and (max-width: 1024px) {
  body {
    background-color: lightseagreen;
  }
}

/* 桌面屏幕 */
@media (min-width: 1025px) {
  body {
    background-color: lightgoldenrodyellow;
  }
}

1.2.2 针对设备方向的媒体查询

我们还可以根据设备的方向（横向或纵向）来应用不同的样式：

/* 纵向（竖屏） */
@media (orientation: portrait) {
  body {
    background-color: lightpink;
  }
}

/* 横向（横屏） */
@media (orientation: landscape) {
  body {
    background-color: lightcyan;
  }
}

2. 流式布局与弹性布局

2.1 流式布局的定义与应用

流式布局（Fluid Layout）是指使用相对单位（如百分比）来定义元素的宽度和高度，使网页能够根据浏览器窗口的大小自动调整布局。

示例：

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

.container {
  width: 100%;
}

.item {
  width: 33.33%;
  float: left;
  box-sizing: border-box;
}

在这个示例中，.item的宽度是33.33%，这样当浏览器窗口大小改变时，.item的宽度也会相应调整。

2.2 弹性布局在响应式设计中的应用

弹性布局（Flexbox）是另一种用于实现响应式设计的强大工具。通过使用弹性容器和弹性项目，我们可以更灵活地定义元素在容器中的排列和对齐方式。

示例：

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-item {
  flex: 1 1 30%;
  margin: 5px;
}

在这个示例中，.flex-container使用了flex布局，并且flex-item设置了flex: 1 1 30%;，这意味着每个flex-item的基础宽度是30%，并且可以根据剩余空间进行调整。

2.3 示例：响应式导航菜单

我们来实现一个简单的响应式导航菜单。导航菜单在桌面设备上显示为水平菜单，在移动设备上显示为垂直菜单。

<nav class="navbar">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

/* 基础样式 */
.navbar {
  background-color: #333;
}

.navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.navbar li {
  float: left;
}

.navbar li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* 响应式样式 */
@media (max-width: 600px) {
  .navbar li {
    float: none;
  }
}

通过以上 CSS 代码，当屏幕宽度小于 600 像素时，导航菜单项会从水平排列变为垂直排列。

响应式设计通过灵活的布局和适应性样式，能够显著提升用户体验。