CSS中的响应式布局初识

2025/1/30 13:57:10 来源：https://blog.csdn.net/cuijiying/article/details/145330142 浏览: 次关键词：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，使内容框垂直堆叠。