如何仅用 CSS 实现响应式头部内容切换（桌面版与移动版）-js教程-PHP中文网

如何仅用 CSS 实现响应式头部内容切换（桌面版与移动版）

本文详解如何通过纯 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 区域（置于内同一层级）：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

<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 添加图标，确保高分辨率适配。