5.2 媒体查询：实现多设备布局切换
媒体查询（Media Queries）是响应式设计的核心机制，通过检测设备特性（如屏幕宽度、分辨率）动态应用CSS样式。采用"移动端优先"策略时，先定义移动端基础样式，再通过媒体查询为大屏设备添加适配规则。
案例5-2：响应式导航栏（移动端汉堡菜单）
移动端导航栏折叠为汉堡按钮，点击展开菜单；大屏设备显示完整导航链接。核心代码如下：
css
复制代码
/* 移动端基础样式（默认） */
.navbar { background: #333; padding: 1rem; }
.menu { display: none; /* 默认隐藏菜单 */ }
.hamburger { display: block; /* 显示汉堡按钮 */ }
/* 平板及以上设备适配（断点768px） */
@media (min-width: 768px) {
.menu { display: flex; /* 横向显示菜单 */ }
.hamburger { display: none; /* 隐藏汉堡按钮 */ }
}断点含义：@media (min-width: 768px)表示当屏幕宽度≥768px时应用大括号内样式，768px是行业通用的"平板/手机"分界点。