CSS实现响应式布局的核心在于让页面能根据设备屏幕的尺寸自动调整排版与样式，而媒体查询正是完成这件事最有效的工具。通过监听视口宽度等特征，我们可以为不同环境编写差异化的样式规则。
什么是媒体查询
媒体查询是CSS3提供的功能，使用@media规则可以针对不同的媒体类型和条件应用样式。例如当屏幕宽度小于768像素时，希望导航栏变成竖排，就可以写一条对应的查询。
移动优先的写法
推荐采用移动优先思路，先写小屏幕的默认样式，再用min-width逐步增强大屏体验，这样逻辑更清晰也更容易维护。
/* 默认手机样式 */
.nav {
display: flex;
flex-direction: column;
}
/* 平板及以上 */
@media (min-width: 768px) {
.nav {
flex-direction: row;
}
}
/* 桌面及以上 */
@media (min-width: 1024px) {
.container {
max-width: 960px;
margin: 0 auto;
}
}
常用断点建议
不必盲目模仿别人，但可以参考以下常见区间设置断点：
- 小屏手机：小于576px
- 手机横屏或小平板：576px到767px
- 平板：768px到1023px
- 桌面：1024px以上
结合相对单位
媒体查询负责结构切换，内部尺寸尽量使用rem、%等相对单位，避免写死像素，能进一步提升适应能力。
实战：两栏变单栏
下面演示一个常见需求，桌面端左侧内容加右侧边栏，窄屏时自动堆叠为单栏。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.layout { display: flex; gap: 20px; }
.main { flex: 1; }
.side { width: 240px; }
@media (max-width: 767px) {
.layout { flex-direction: column; }
.side { width: auto; }
}
</style>
</head>
<body>
<div class="layout">
<div class="main">正文区域</div>
<div class="side">侧边栏</div>
</div>
</body>
</html>
调试小技巧
浏览器开发者工具的设备模拟模式可以实时查看不同宽度下的效果。写媒体查询时建议先确定内容何时开始拥挤，再以此设置断点，而不是仅按设备型号去硬套。
总结
用CSS实现响应式布局并不复杂，掌握媒体查询的语法与移动优先策略后，配合弹性盒子和相对单位，就能应对大多数适配场景。多写几个页面，自然会形成自己的断点经验。
CSS响应式布局media_query修改时间：2026-07-30 12:33:08