制作响应式布局：使用CSS媒体查询和弹性盒子

# 1. 引言

## 什么是响应式布局

响应式布局是一种网页设计的方法，能够使网站在不同的设备上都能够以最佳的方式展示，无论是在桌面电脑、平板电脑还是移动设备上。在传统的网页设计中，通常需要为不同的设备编写不同的代码，而响应式布局可以通过使用CSS媒体查询和弹性盒子技术，根据不同设备的尺寸和屏幕方向，动态地改变网页的布局和样式，以适应不同的屏幕大小和设备类型。

## 为什么要使用CSS媒体查询和弹性盒子

在移动设备普及的今天，网站的访问终端已经远远超出了桌面电脑的范畴，用户使用的设备类型和屏幕尺寸多样化，因此需要一种适应不同设备的灵活布局方法。CSS媒体查询和弹性盒子相辅相成，是实现响应式布局的重要工具。

CSS媒体查询可以根据设备的特性，如屏幕宽度、设备方向等，动态地应用不同的CSS样式，从而实现不同设备上的布局优化。而弹性盒子则可以提供灵活的布局方式，使得布局可以自适应不同尺寸的屏幕，简化了对布局的控制。这两个技术的结合使用，可以大大提高网页的可用性和用户体验。
## CSS媒体查询简介

### 2. CSS媒体查询简介

#### 什么是CSS媒体查询
CSS媒体查询是一种可以在不同的媒体上应用不同样式的技术。它可以根据设备的特性（如屏幕尺寸、屏幕方向、分辨率等）来应用不同的CSS样式。

#### 媒体查询的语法和使用方法
媒体查询使用`@media`规则来包裹CSS样式，可以根据需要指定不同的条件来应用样式。例如：

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

上述代码表示在屏幕宽度小于等于600px时，将body的背景色设为浅蓝色。

### 4. 使用CSS媒体查询制作响应式布局

响应式布局是指网页设计能够适应不同设备和屏幕尺寸的布局方式，使得网页在不同设备上都能有良好的显示效果。CSS媒体查询是实现响应式布局的重要工具之一。

#### 设置不同屏幕尺寸的CSS样式

在