本文详解如何通过纯 css 的媒体查询（media queries）配合 html 结构优化，在窗口缩小时自动替换整个头部区域内容（如将“women/men/kids + track/contact/download”切换为简洁的“download app”横幅），无需 javascript。
本文详解如何通过纯 css 的媒体查询（media queries）配合 html 结构优化，在窗口缩小时自动替换整个头部区域内容（如将“women/men/kids + track/contact/download”切换为简洁的“download app”横幅），无需 javascript。
在构建响应式网站时，常需根据不同视口尺寸呈现差异化的导航体验——例如桌面端展示多分类+多服务入口，而移动端则精简为高转化率的行动号召（如“下载App”横幅）。幸运的是，仅使用 CSS 即可完美实现这一效果，核心依赖两个关键技术： 声明与 @media 媒体查询。
✅ 必要前提：设置视口（Viewport）
首先确保 HTML
中包含标准视口标签，否则移动端浏览器可能忽略媒体查询或错误缩放：<meta name="viewport" content="width=device-width, initial-scale=1.0">
该声明告诉浏览器以设备真实宽度渲染页面，并禁用默认缩放，是响应式设计的基石。
✅ 核心方案：双结构 + 显示控制
CSS 本身无法动态修改 HTML 文本内容，但可通过条件性显示/隐藏预设的两套 DOM 结构达成等效效果：
- 保留原有 .first-header（桌面版结构）
- 新增 .mobile-banner（移动端专属横幅）
- 使用 display: none / display: flex 在断点处切换可见性
✅ 示例 HTML 结构（精简关键部分）
<!-- 桌面版头部（默认显示） -->
<div class="first-header">
<div class="outfit-selection-by-gender">
<button class="women">WOMEN</button>
<button class="men">MEN</button>
<button class="kids">KIDS</button>
</div>
<div class="support-section">
<button class="order-tracking-button">TRACK ORDER</button>
<button class="contact-us-button">CONTACT US</button>
<button class="app-download-button">DOWNLOAD APP</button>
</div>
</div>
<!-- 移动端横幅（默认隐藏） -->
<div class="mobile-banner">
<span>Download Our App & Get 10% Additional Cashback</span>
<button class="app-download-button">Open App</button>
</div>
✅ 关键 CSS 媒体查询逻辑
/* 默认：仅显示桌面头部 */
.first-header { display: block; }
.mobile-banner { display: none; }
/* 当视口宽度 ≤ 600px 时切换 */
@media screen and (max-width: 600px) {
.first-header { display: none; } /* 隐藏桌面版 */
.mobile-banner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
height: 50px;
background-color: #ed2d2f;
color: white;
}
/* 可选：优化按钮样式 */
.mobile-banner button {
background: white;
color: #ed2d2f;
font-weight: bold;
border-radius: 4px;
padding: 8px 16px;
}
}
⚠️ 注意事项与最佳实践
- 避免 visibility: hidden 或 opacity: 0：它们仍占用文档流且影响可访问性；display: none 是语义更清晰、性能更优的选择。
- 断点值需结合设计稿确定：600px 是常见移动阈值，但建议根据实际布局测试（如使用 Chrome DevTools 的设备模拟器）。
- 无障碍支持：为 .mobile-banner 添加 role="banner" 和适当的 aria-label，确保屏幕阅读器能正确识别上下文。
- 渐进增强思维：即使 CSS 加载失败，用户仍能看到基础 HTML 内容（桌面版），保证核心功能可用。
✅ 总结
无需 JavaScript，仅靠语义化 HTML 结构 + 精准媒体查询 + display 属性控制，即可优雅实现“窗口缩小时头部内容完全替换”的交互效果。这种方法轻量、可靠、易维护，是现代响应式开发的标准实践。后续还可扩展为多级断点（如平板专用版），或结合 CSS 自定义属性（--header-text）实现更灵活的文本切换（需配合 ::before 伪元素），但基础双结构方案已覆盖绝大多数场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
