响应式设计是现代网页开发的基础要求，核心目标是通过一套代码让网页在手机、平板、桌面电脑等不同尺寸的设备上都能呈现合适的布局与样式。CSS媒体查询是实现这一能力的核心技术，它允许开发者根据设备的特性，比如屏幕宽度、分辨率、横竖屏状态等，来应用不同的CSS样式规则。
媒体查询的基础语法
媒体查询的基本结构由@media规则组成，语法格式如下：
/* 基础语法结构 */
@media 媒体类型 and (媒体特性) {
/* 满足条件下要应用的CSS样式 */
}
常用的媒体类型有screen（屏幕设备）、print（打印设备）等，实际开发中大多数场景直接使用screen或者省略媒体类型（默认适配所有屏幕设备）。媒体特性中最常用的是max-width和min-width，分别表示设备最大宽度和最小宽度。
常用断点设置
断点是指样式切换的屏幕宽度阈值，行业内有比较通用的断点参考值：
- 手机端：小于768px
- 平板端：768px到1024px之间
- 桌面端：大于1024px
基础响应式布局示例
下面通过一个三列布局的例子，演示如何使用媒体查询实现不同屏幕下的布局切换：
/* 基础样式：桌面端默认三列布局 */
.container {
display: flex;
gap: 20px;
padding: 20px;
}
.col {
flex: 1;
background-color: #f0f0f0;
padding: 15px;
border-radius: 4px;
}
/* 平板端：屏幕宽度小于等于1024px时，改为两列布局 */
@media screen and (max-width: 1024px) {
.container {
flex-wrap: wrap;
}
.col {
flex: 0 0 calc(50% - 10px);
}
}
/* 手机端：屏幕宽度小于等于768px时，改为单列布局 */
@media screen and (max-width: 768px) {
.col {
flex: 0 0 100%;
}
}
对应的HTML结构如下：
<div class="container">
<div class="col">第一列内容</div>
<div class="col">第二列内容</div>
<div class="col">第三列内容</div>
</div>
媒体查询的其他常用场景
调整字体大小
不同屏幕下合适的字体大小不同，可以通过媒体查询调整：
body {
font-size: 16px;
}
/* 手机端字体适当缩小 */
@media (max-width: 768px) {
body {
font-size: 14px;
}
}
/* 大屏桌面端字体适当放大 */
@media (min-width: 1440px) {
body {
font-size: 18px;
}
}
控制元素显示隐藏
部分元素只在特定屏幕下展示时，可以用媒体查询控制：
/* 桌面端显示的侧边栏 */
.sidebar {
display: block;
}
/* 手机端隐藏侧边栏 */
@media (max-width: 768px) {
.sidebar {
display: none;
}
}
/* 手机端显示的菜单按钮 */
.menu-btn {
display: none;
}
@media (max-width: 768px) {
.menu-btn {
display: block;
}
}
横竖屏适配
可以通过orientation特性适配横竖屏：
/* 竖屏时的样式 */
@media (orientation: portrait) {
.banner {
height: 200px;
}
}
/* 横屏时的样式 */
@media (orientation: landscape) {
.banner {
height: 120px;
}
}
媒体查询的注意事项
- 断点设置要符合项目实际需求，不要盲目套用通用值，最好根据设计稿的内容调整。
- 遵循移动优先原则，先写小屏幕的基础样式，再用
min-width逐步添加大屏幕的样式，代码可维护性更好。 - 避免设置过多的断点，过多的样式切换会增加代码复杂度，一般3到4个断点就能满足大部分场景需求。
- 媒体查询的样式会覆盖之前的同名样式，注意选择器的优先级问题，避免样式不生效。
CSS媒体查询响应式设计响应式布局breakpoint修改时间：2026-06-12 04:15:17