CSS中的响应式布局初识

响应式布局是一种Web设计方法，使网站能够在各种设备（如台式电脑、平板电脑、手机等）上有良好的显示效果。响应式布局通常使用CSS媒体查询来调整页面布局以适应不同的屏幕尺寸和分辨率。下面我将通过一个简单的示例来讲解如何实现响应式布局。

示例场景

假设我们要创建一个简单的Web页面，它包含一个标题和两个并排的内容区域。在较大的屏幕上，内容区域将并排显示；在较小的屏幕上，内容区域将堆叠显示。

HTML 代码

首先，我们编写基本的HTML结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Layout Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Responsive Layout Example</h1>
    </header>
    <main>
        <section class="content">
            <div class="box">Content Box 1</div>
            <div class="box">Content Box 2</div>
        </section>
    </main>
</body>
</html>

CSS 代码

接下来，我们编写CSS来实现响应式布局：

/* styles.css */

/* 基本样式 */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

header {
    background-color: #4CAF50;
    color: white;
    padding: 1em;
    text-align: center;
    width: 100%;
}

main {
    width: 100%;
    max-width: 1200px;
    padding: 1em;
}

.content {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
}

.box {
    background-color: #f1f1f1;
    padding: 1em;
    flex: 1;
    min-width: 300px;
    box-sizing: border-box;
    text-align: center;
}

/* 响应式布局 */
@media (max-width: 600px) {
    .content {
        flex-direction: column;
    }
}

代码解读

基本样式：
- body：设置页面的基本字体、内外边距，并使用flex布局使内容居中。
- header：设置标题区域的背景色、字体颜色、内边距和文本对齐方式。
- main：限制主内容区域的最大宽度，并添加内边距。
- content：使用flex布局和flex-wrap属性使内容区域能够在小屏幕上换行。
- box：设置每个内容框的背景色、内边距、最小宽度和文本对齐方式。
响应式布局：
- 使用@media查询，当屏幕宽度小于600px时，内容区域的flex-direction属性设置为column，使内容框垂直堆叠。

使用场景