本文详解如何通过纯 CSS 的媒体查询与 display 属性控制不同视口下的头部内容展示，无需 JavaScript 即可实现类似电商网站“桌面端显示分类导航，移动端替换为 App 下载横幅”的响应式效果。
本文详解如何通过纯 css 的媒体查询与 `display` 属性控制不同视口下的头部内容展示，无需 javascript 即可实现类似电商网站“桌面端显示分类导航，移动端替换为 app 下载横幅”的响应式效果。
在构建响应式网站时，一个常见且关键的需求是：根据屏幕尺寸动态切换导航栏内容——例如桌面端显示「WOMEN / MEN / KIDS」分类按钮和「TRACK ORDER / CONTACT US」支持入口，而移动端（如手机或窄窗口）则隐藏全部导航，仅展示醒目的 App 下载提示。好消息是：这完全可以仅用 HTML + CSS 实现，无需任何 JavaScript。
核心原理在于 CSS 媒体查询（Media Queries）配合元素显隐控制。我们为不同设备准备两套独立的 HTML 结构（桌面版 .first-header 和移动版 .mobile-banner），再通过 @media 规则在指定断点（如 max-width: 600px）下切换它们的可见性。
✅ 必备前提：添加 viewport 元标签
确保移动端正确缩放，必须在 中加入：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
缺少该标签会导致 CSS 媒体查询在移动浏览器中失效或行为异常。
立即学习“前端免费学习笔记（深入）”；
✅ HTML 结构设计（双版本并存）
将原始头部保留为桌面版，并新增一个专用于小屏的 .mobile-banner 区域（置于 内同一层级）：
<div class="first-header"> <!-- 原始分类与支持按钮结构 --> </div> <div class="mobile-banner"> <span>Download Our App & Get 10% Additional Cashback On All Orders</span> <button class="app-download-button">Open App</button> </div>
? 注意：两个区块互为“替代关系”，而非叠加。初始状态下仅桌面版可见，移动端版本默认隐藏。
✅ CSS 实现逻辑（关键代码）
使用 display: none / display: flex 控制显隐，并统一设置基础样式：
/* 默认隐藏移动横幅 */
.mobile-banner {
display: none;
height: 50px;
background-color: #ed2d2f; /* 与原 header 同色系 */
color: white;
display: flex;
align-items: center;
justify-content: center;
padding: 0 20px;
font-size: 14px;
}
/* 桌面端正常显示 */
.first-header {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
height: 45px;
background-color: #ed2d2f;
/* ...其余原有样式保持不变 */
}
/* 当视口宽度 ≤ 600px 时切换显示 */
@media screen and (max-width: 600px) {
.first-header {
display: none; /* 隐藏桌面导航 */
}
.mobile-banner {
display: flex; /* 显示移动横幅 */
}
}⚠️ 注意事项与最佳实践
-
断点选择要合理：
600px是常用移动临界值，但建议结合设计稿实际测试（如480px或768px），也可使用min-width配合max-width构建更精细的断点。 - 避免冗余 DOM：虽然两套结构共存，但因 CSS 控制显隐，对性能影响极小；若需极致优化，后期可考虑 JS 动态注入，但本方案已满足绝大多数场景。
-
无障碍友好性：被
display: none隐藏的元素不会被屏幕阅读器读取，符合语义逻辑；如需保留可访问性（如仅视觉隐藏），应改用visibility: hidden+position: absolute等组合，但此处不推荐——因为内容本质不同，应视为两个独立模块。 -
图标占位处理：示例中
.app-download-button预留了padding-left: 30px供插入 SVG/图标，实际项目中建议使用<svg></svg>内联或伪元素::before添加图标，确保高分辨率适配。
✅ 总结
仅靠 CSS 就能优雅实现“窗口缩小时头部内容完全更换”，关键在于：
- 结构分离：为不同视口准备语义清晰、功能独立的 HTML 区块；
-
精准控制：利用
@media查询 +display切换显隐，零 JS 介入； -
基础保障：始终包含
<meta name="viewport">，确保响应式根基稳固。
这种模式简洁、可靠、易维护，是现代响应式布局的标准实践之一，特别适合学习阶段深入理解 CSS 布局与响应式设计的本质逻辑。
