在响应式网页开发中，让页面在不同尺寸的设备上都有良好的展示效果是非常重要的一环。桌面端屏幕宽度充足，三列布局可以充分利用空间展示更多内容，而移动端屏幕较窄，三列布局会导致内容被压缩，阅读体验很差，这时候就需要通过CSS媒体查询来切换布局模式。
什么是CSS媒体查询
CSS媒体查询是CSS3提供的一个功能，它可以检测设备的特性，比如屏幕宽度、高度、设备方向等，然后根据检测到的特性应用不同的CSS样式。简单来说，就是给不同条件的设备写不同的样式规则，让页面能适配多种设备。
基础的媒体查询语法如下：
/* 当屏幕宽度大于等于1200px时应用这里的样式 */
@media screen and (min-width: 1200px) {
.container {
width: 1170px;
margin: 0 auto;
}
}实现三列到单列转换的核心思路
我们可以先给容器设置flex布局，在桌面端设置子元素占据三分之一的宽度实现三列，然后在移动端通过媒体查询修改子元素的宽度为100%，从而实现单列布局。整个过程不需要修改HTML结构，只通过CSS样式调整即可完成。
1. 基础HTML结构
首先准备一个简单的包含三个内容块的HTML结构：
<div class="layout-container">
<div class="layout-item">第一列内容</div>
<div class="layout-item">第二列内容</div>
<div class="layout-item">第三列内容</div>
</div>2. 桌面端三列样式
给容器开启flex布局，设置子元素自动换行，每个子元素占据33.333%的宽度，同时可以加一点内边距让内容有间隔：
.layout-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
padding: 20px;
}
.layout-item {
/* 桌面端每个元素占1/3宽度，减去gap的影响 */
flex: 0 0 calc(33.333% - 14px);
background-color: #f5f5f5;
padding: 20px;
border-radius: 8px;
box-sizing: border-box;
}3. 移动端媒体查询适配
通常移动端屏幕宽度小于768px，我们可以在这个断点处修改子元素的宽度，让每个元素占满整行，实现单列布局：
/* 屏幕宽度小于768px时，适配移动端 */
@media screen and (max-width: 768px) {
.layout-item {
/* 移动端每个元素占满整行 */
flex: 0 0 100%;
}
}完整代码示例
把上面的代码组合起来，就可以得到一个完整的可运行的示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三列到单列响应式布局</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Microsoft YaHei", sans-serif;
background-color: #fff;
}
.layout-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
padding: 20px;
max-width: 1200px;
margin: 0 auto;
}
.layout-item {
flex: 0 0 calc(33.333% - 14px);
background-color: #f5f5f5;
padding: 30px;
border-radius: 8px;
box-sizing: border-box;
}
@media screen and (max-width: 768px) {
.layout-item {
flex: 0 0 100%;
}
}
</style>
</head>
<body>
<div class="layout-container">
<div class="layout-item">
<h3>第一列</h3>
<p>这是桌面端三列布局中的第一列内容，移动端会自动转换为单列显示。</p>
</div>
<div class="layout-item">
<h3>第二列</h3>
<p>这是桌面端三列布局中的第二列内容，移动端会自动转换为单列显示。</p>
</div>
<div class="layout-item">
<h3>第三列</h3>
<p>这是桌面端三列布局中的第三列内容，移动端会自动转换为单列显示。</p>
</div>
</div>
</body>
</html>常见问题与注意事项
- 断点选择要根据实际内容调整，不一定非要用768px，也可以根据内容在哪个宽度下展示效果变差来设置断点。
- 使用
box-sizing: border-box可以让内边距和边框计入元素宽度，避免计算宽度时出现溢出问题。 - 如果内容块高度不一致，flex布局默认会拉伸子元素高度，要是需要保持各自高度，可以给容器加
align-items: flex-start属性。 - 测试的时候可以直接拖动浏览器窗口宽度，观察布局变化是否符合预期。
提示：媒体查询的断点选择核心是“内容优先”，而不是死守常见的设备尺寸断点，当内容在当前宽度下展示不佳时，就是需要设置断点的时机。