响应式布局能够让网页在不同尺寸的设备上都能呈现出合适的展示效果，避免在小屏设备上出现内容溢出、布局错乱的问题。CSS中实现响应式布局的核心工具是媒体查询和弹性盒，两者搭配使用可以覆盖绝大多数布局场景。
什么是响应式布局
响应式布局指的是网页能够根据访问设备的屏幕尺寸、分辨率等特性，自动调整自身的布局结构和元素尺寸，让用户在任意设备上都能获得良好的浏览体验。传统的固定宽度布局只适配特定尺寸的屏幕，而响应式布局通过动态适配的方式解决了多端适配的痛点。
媒体查询基础用法
媒体查询是CSS3提供的功能，允许开发者针对不同的媒体类型和条件应用不同的样式规则。它的核心逻辑是判断当前设备是否满足指定的条件，如果满足就应用对应的样式块。
媒体查询语法结构
媒体查询的基本语法如下：
/* 基础语法 */
@media 媒体类型 and (条件) {
选择器 {
属性: 值;
}
}
常见的媒体类型有screen（屏幕设备）、print（打印设备）等，实际开发中大多使用screen。条件部分可以设置宽度、高度、分辨率等参数，最常用的条件是max-width和min-width。
常用媒体查询条件示例
以下是几个常见的媒体查询条件写法：
max-width: 768px：当屏幕宽度小于等于768px时生效，通常对应手机设备min-width: 769px and max-width: 1024px：当屏幕宽度在769px到1024px之间时生效，通常对应平板设备min-width: 1025px：当屏幕宽度大于等于1025px时生效，通常对应PC设备
媒体查询实际代码示例
下面的代码实现了不同屏幕宽度下容器宽度的自适应调整：
/* 默认样式，适配PC端 */
.container {
width: 1200px;
margin: 0 auto;
background-color: #f5f5f5;
padding: 20px;
}
/* 平板设备适配 */
@media screen and (max-width: 1024px) {
.container {
width: 90%;
}
}
/* 手机设备适配 */
@media screen and (max-width: 768px) {
.container {
width: 100%;
padding: 10px;
}
}
弹性盒（flexbox）基础用法
弹性盒是CSS3引入的布局模型，专门用于解决容器内元素的排列、对齐和空间分配问题，非常适合用来构建响应式的组件布局。开启弹性盒布局只需要给容器设置display: flex属性。
弹性盒核心属性
弹性盒的常用属性分为容器属性和项目属性两类，以下是核心属性说明：
| 属性分类 | 属性名 | 作用说明 |
|---|---|---|
| 容器属性 | flex-direction | 设置主轴方向，可选值有row、row-reverse、column、column-reverse |
| justify-content | 设置主轴上项目的对齐方式，可选值有flex-start、flex-end、center、space-between、space-around | |
| flex-wrap | 设置项目是否换行，可选值有nowrap、wrap、wrap-reverse | |
| 项目属性 | flex-grow | 设置项目的放大比例，默认值为0，即不放大 |
| flex-shrink | 设置项目的缩小比例，默认值为1，空间不足时项目会缩小 |
弹性盒实际代码示例
下面的代码实现了一个导航栏的响应式布局，小屏时导航项垂直排列，大屏时水平排列：
/* 导航容器 */
.nav {
display: flex;
flex-direction: column; /* 默认垂直排列，适配手机 */
list-style: none;
padding: 0;
margin: 0;
background-color: #333;
}
/* 导航项 */
.nav-item {
padding: 15px;
color: white;
text-align: center;
border-bottom: 1px solid #555;
}
/* 平板及以上设备，导航水平排列 */
@media screen and (min-width: 769px) {
.nav {
flex-direction: row; /* 主轴改为水平方向 */
justify-content: space-around; /* 项目均匀分布 */
}
.nav-item {
border-bottom: none;
border-right: 1px solid #555;
}
.nav-item:last-child {
border-right: none;
}
}
媒体查询与弹性盒组合使用
实际开发中通常会将媒体查询和弹性盒结合使用，媒体查询负责不同断点的整体布局调整，弹性盒负责组件内部的灵活排列。以下是一个完整的页面布局示例：
/* 全局基础样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Microsoft YaHei", sans-serif;
}
/* 页面整体容器 */
.page {
display: flex;
flex-direction: column;
min-height: 100vh;
}
/* 头部 */
.header {
background-color: #2c3e50;
color: white;
padding: 20px;
text-align: center;
}
/* 主体内容区 */
.main {
display: flex;
flex: 1; /* 占据剩余空间 */
flex-direction: column; /* 默认垂直排列 */
padding: 20px;
gap: 20px; /* 子元素间距 */
}
/* 侧边栏和正文区域 */
.sidebar {
background-color: #ecf0f1;
padding: 20px;
flex: 1;
}
.content {
background-color: #fff;
padding: 20px;
flex: 2;
}
/* 底部 */
.footer {
background-color: #2c3e50;
color: white;
padding: 20px;
text-align: center;
}
/* 平板设备适配 */
@media screen and (min-width: 769px) {
.main {
flex-direction: row; /* 侧边栏和正文水平排列 */
}
}
/* PC设备适配 */
@media screen and (min-width: 1025px) {
.page {
width: 1200px;
margin: 0 auto;
}
}
对应的HTML结构如下：
<div class="page">
<header class="header">
<h1>响应式布局示例</h1>
</header>
<main class="main">
<aside class="sidebar">
<p>侧边栏内容</p>
</aside>
<section class="content">
<p>正文内容区域</p>
</section>
</main>
<footer class="footer">
<p>底部版权信息</p>
</footer>
</div>
注意事项
- 媒体查询的断点设置需要结合项目实际需求，不要盲目照搬常见的断点数值
- 弹性盒的
flex属性是flex-grow、flex-shrink、flex-basis的简写，建议优先使用简写形式减少代码量 - 移动端优先是响应式开发的主流思路，先写小屏的默认样式，再用
min-width的媒体查询逐步适配大屏，这样代码逻辑更清晰 - 测试响应式效果时，除了使用浏览器的开发者工具模拟不同设备，也建议在真实设备上验证效果