CSS3学习教程，从入门到精通，CSS3 媒体查询实现响应式布局语法指南（21）

CSS3 媒体查询实现响应式布局语法指南

一、媒体查询核心语法

1. 基础语法结构

@media 媒体类型 and (媒体特性) {/* 匹配条件时应用的CSS规则 */
}

2. 媒体类型（可省略）

类型值	说明
`all`	所有设备（默认值）
`screen`	屏幕设备
`print`	打印机设备
`speech`	屏幕阅读器

3. 常用媒体特性

特性名称	说明	单位/值示例
`width`	视口宽度	px, em, rem
`min-width`	视口最小宽度	600px
`max-width`	视口最大宽度	1024px
`orientation`	设备方向	portrait/landscape
`aspect-ratio`	视口宽高比	16/9
`resolution`	设备分辨率	300dpi
`hover`	主输入方式是否支持悬停	hover/none

4. 逻辑操作符

/* AND逻辑（同时满足） */
@media screen and (min-width: 768px) and (max-width: 1024px) {}/* OR逻辑（逗号分隔） */
@media (max-width: 600px), (orientation: portrait) {}/* NOT逻辑 */
@media not screen and (color) {}

5. 断点设置参考

设备类型	典型断点范围
手机（竖屏）	< 576px
手机（横屏）	576px - 767px
平板	768px - 991px
桌面	992px - 1199px
大屏桌面	≥ 1200px

二、完整案例代码

<!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>/* 基础样式 - 移动优先 */* {box-sizing: border-box;margin: 0;padding: 0;}.container {padding: 15px;}/* 导航样式 */.nav {background: #333;padding: 1rem;}.nav-list {list-style: none;display: flex;flex-direction: column; /* 移动端垂直排列 */gap: 10px;}.nav-item {color: white;padding: 0.5rem;text-align: center;background: #666;}/* 主内容区 */.main-content {margin: 20px 0;padding: 15px;background: #f0f0f0;}/* 侧边栏 */.sidebar {padding: 15px;background: #e0e0e0;}/* 平板设备（≥768px） */@media screen and (min-width: 768px) {.nav-list {flex-direction: row; /* 水平排列导航 */justify-content: space-around;}.content-wrapper {display: flex;gap: 20px;}.main-content {flex: 3; /* 主内容占3份 */}.sidebar {flex: 1; /* 侧边栏占1份 */}}/* 桌面设备（≥992px） */@media screen and (min-width: 992px) {.container {max-width: 1200px;margin: 0 auto;}.nav-list {justify-content: flex-start; /* 左对齐导航项 */gap: 30px;}.nav-item {padding: 1rem 2rem;}}/* 大屏幕设备（≥1200px） */@media screen and (min-width: 1200px) {.main-content {font-size: 1.1rem;}.sidebar {padding: 30px;}}/* 打印样式 */@media print {.nav, .sidebar {display: none;}.main-content {background: white;color: black;}}</style>
</head>
<body><nav class="nav"><ul class="nav-list"><li class="nav-item">首页</li><li class="nav-item">产品</li><li class="nav-item">服务</li><li class="nav-item">关于</li></ul></nav><div class="container"><div class="content-wrapper"><main class="main-content"><h2>欢迎访问</h2><p>这是一个响应式布局的演示页面...</p></main><aside class="sidebar"><h3>最新消息</h3><p>响应式设计专题更新...</p></aside></div></div>
</body>
</html>

三、代码注释说明

移动优先策略

基础样式针对小屏幕设备编写
使用flex-direction: column实现垂直布局

平板适配（768px+）

将导航项改为水平排列
创建flex容器实现内容区与侧边栏的并排布局
使用flex比例分配空间（3:1）

桌面适配（992px+）

添加最大宽度限制并居中容器
调整导航项的间距和对齐方式
增大导航项的点击区域

大屏优化（1200px+）

增大正文字号提升可读性
增加侧边栏内边距

打印样式优化

隐藏非必要元素（导航、侧边栏）
调整背景色保证打印效果

四、注意事项

视口设置

<meta name="viewport" content="width=device-width, initial-scale=1.0">

必须包含此meta标签才能确保媒体查询在移动端生效

单位选择建议

优先使用相对单位（rem/em/%）
需要精确控制时使用px

断点设置技巧

根据内容变化设置断点，而非特定设备尺寸
使用Chrome开发者工具设备模式进行测试

性能优化

避免过多的媒体查询分段
将公共样式提取到基础规则中

现代布局结合

配合flexbox/grid布局使用效果更佳
结合CSS自定义属性实现动态样式调整

建议通过实际调整浏览器窗口大小，观察不同断点下的布局变化，加深对媒体查询工作机制的理解。

以下是开发中常用的CSS3媒体查询实际案例，结合不同场景和布局需求，提供具体代码实现及说明：

一、多列布局响应式调整

场景：根据屏幕宽度动态调整列数和布局样式

<style>
.container { display: flex; flex-wrap: wrap; }/* 默认四列布局（≥1200px）*/
.box { width: 25%; padding: 15px;border: 2px solid green;
}/* 平板：三列布局（768-1199px） */
@media (max-width: 1199px) {.box { width: 33.33%; border-color: blue;}
}/* 手机横屏：两列布局（480-767px） */
@media (max-width: 767px) {.box { width: 50%; padding: 10px;}
}/* 手机竖屏：单列布局（<480px） */
@media (max-width: 479px) {.box { width: 100%; border-color: red;}
}
</style>

特点：结合Flex布局实现动态列数变化，通过边框颜色直观显示当前布局模式。

二、内容动态显示优化

场景：根据设备宽度显示/隐藏特定内容

/* 桌面端显示完整地址 */
.contact-info::after {content: "（联系电话：400-800-1234）";
}/* 移动端隐藏电话号码 */
@media (max-width: 768px) {.contact-info::after {content: "";}.desktop-only { display: none; }.mobile-only { display: block; }
}

特点：通过伪元素动态调整显示内容，优化移动端信息展示。

三、响应式导航栏改造

场景：移动端折叠菜单与桌面端水平菜单切换

.nav {background: #333;padding: 1rem;
}/* 移动端垂直菜单 */
.nav-list {flex-direction: column;display: none;
}.menu-icon { display: block; }/* 桌面端水平菜单 */
@media (min-width: 992px) {.menu-icon { display: none; }.nav-list {display: flex;flex-direction: row;gap: 2rem;}
}

特点：通过媒体查询实现导航栏形态切换，配合JavaScript实现移动端菜单交互。

四、打印样式优化

场景：优化页面打印效果

@media print {.ad-banner, .side-menu {display: none;}body {font-size: 12pt;line-height: 1.5;color: #000;background: none;}a::after {content: " (" attr(href) ")";}
}

特点：隐藏非必要元素、调整文字样式、自动显示链接地址。

五、高清屏幕适配

场景：为Retina屏幕提供高清图片

.logo {background-image: url(logo.png);
}@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { .logo {background-image: url(logo@2x.png);background-size: contain;}
}

特点：通过分辨率检测适配高清显示屏。

六、方向检测布局

场景：根据设备方向调整布局

/* 竖屏布局 */
@media (orientation: portrait) {.gallery {grid-template-columns: 1fr;}
}/* 横屏布局 */
@media (orientation: landscape) {.gallery {grid-template-columns: repeat(3, 1fr);}
}