响应式布局是现代网页开发的基础能力，其中利用CSS媒体查询实现三列到单列的自适应转换，是适配多端屏幕最常见的需求之一。下面我们就通过完整的实践案例，讲解具体的实现过程。
基础三列布局搭建
首先我们需要搭建桌面端的三列布局结构，这里采用浮动加百分比宽度的方式实现，确保在桌面端三列等宽排列。
/* 重置基础样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
/* 三列基础样式 */
.col {
float: left;
width: 33.333%;
padding: 15px;
min-height: 200px;
}
.col-1 {
background-color: #f0f8ff;
}
.col-2 {
background-color: #e6f7ff;
}
.col-3 {
background-color: #f0fff0;
}
/* 清除浮动 */
.clearfix::after {
content: "";
display: block;
clear: both;
}<div class="container clearfix">
<div class="col col-1">
<h3>第一列内容</h3>
<p>这是桌面端展示的第一列内容，包含相关模块信息。</p>
</div>
<div class="col col-2">
<h3>第二列内容</h3>
<p>这是桌面端展示的第二列内容，包含核心功能说明。</p>
</div>
<div class="col col-3">
<h3>第三列内容</h3>
<p>这是桌面端展示的第三列内容，包含辅助信息展示。</p>
</div>
</div>媒体查询规则设置
接下来通过CSS媒体查询设置不同屏幕宽度下的布局规则，实现自适应转换。我们按照小屏手机、中屏平板、大屏桌面的顺序设置断点。
手机端：单列布局
当屏幕宽度小于768px时，将三列的宽度调整为100%，实现单列排列，避免内容在小屏上挤压。
/* 屏幕宽度小于768px时，手机端样式 */
@media screen and (max-width: 768px) {
.col {
width: 100%;
float: none;
}
}平板端：两列布局
当屏幕宽度在768px到992px之间时，设置前两列宽度为50%，第三列宽度100%并换行，实现两列加底栏的布局效果。
/* 屏幕宽度在768px到992px之间时，平板端样式 */
@media screen and (min-width: 768px) and (max-width: 992px) {
.col-1, .col-2 {
width: 50%;
}
.col-3 {
width: 100%;
clear: both;
}
}桌面端：三列布局
屏幕宽度大于992px时，使用之前设置的基础三列样式，保持33.333%的宽度，实现三列等宽排列。
实现要点说明
在实际开发中使用这种方法需要注意以下几点：
- 使用
box-sizing: border-box可以让padding和border的宽度计入元素总宽度，避免宽度计算错误 - 媒体查询的断点需要根据实际业务需求调整，不要盲目套用通用断点
- 如果内容高度不一致，浮动布局可能会出现错位，可以配合
flex布局优化，核心的媒体查询逻辑保持不变 - 测试时需要覆盖不同尺寸的屏幕，确保转换效果符合预期
扩展优化方案
如果希望布局更灵活，也可以使用Flex布局结合媒体查询实现，核心逻辑依然是不同屏幕宽度下调整子元素的宽度占比：
/* Flex布局版本的三列基础样式 */
.flex-container {
display: flex;
flex-wrap: wrap;
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
.flex-col {
width: 33.333%;
padding: 15px;
min-height: 200px;
}
/* 平板端两列 */
@media screen and (min-width: 768px) and (max-width: 992px) {
.flex-col {
width: 50%;
}
.flex-col:last-child {
width: 100%;
}
}
/* 手机端单列 */
@media screen and (max-width: 768px) {
.flex-col {
width: 100%;
}
}这种实现方式不需要清除浮动，代码更简洁，也是目前更推荐的开发方式。