仅用CSS实现响应式头部内容切换桌面与移动端不同文案
在构建响应式网站时，经常会遇到这样一个场景：桌面端需要展示完整的分类导航和服务入口，比如“女士/男士/儿童+追踪/联系/下载”，但到了移动端，空间有限，最好的做法是直接放一个简短有力的“下载App”横幅。不少开发者第一反应是用JavaScript控制，但其实这个需求纯CSS就能搞定。核心就两招： 和 @media 媒体查询。说实话，这个技巧在很多场景下非常实用，比如电商网站、工具类应用的首页头部。
实现起来也并不复杂，不需要高深的前端知识。关键在于：在HTML里预先准备好两套结构，用CSS的显示/隐藏属性来响应断点变化。
✅ 必要前提：设置视口（Viewport）
动手之前，先确认一件事：HTML的 里是否包含标准的视口标签。如果没有，移动端浏览器可能会忽略后面的媒体查询，或者自作主张地缩放页面，导致整个布局乱掉。标准写法如下：
这个声明告诉浏览器，以设备的真实宽度来渲染页面，同时禁用默认缩放。可以说，没有这一行，后续的响应式代码再漂亮也白搭。这是所有响应式设计的基石。
✅ 核心方案：双结构 + 显示控制
CSS本身没法直接修改HTML里的文本内容，但换个思路就豁然开朗了——在HTML中提前写好两套结构，再通过CSS在不同视口下显示或隐藏对应的部分。具体做法分三步：
- 原有的
.first-header保留不变，作为桌面版的默认结构； - 新增一个
.mobile-banner，专门给移动端用，默认隐藏； - 在媒体查询断点处，用
display: none和display: flex（或者其他布局方式）切换两者的可见性。
下面是一个精简后的HTML结构示例，可以帮助理解这个设计思路：
可以看到，桌面版和移动版的DOM结构完全独立、互不干扰。接下来就是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;
}
}
核心逻辑就是上面这些。浏览器在宽度小于等于600px时，会读取@media规则里的样式，自动完成显示和隐藏的切换。
⚠️ 注意事项与最佳实践
虽然代码量不大，但有几个关键细节值得留意：
- 不要用
visibility: hidden或opacity: 0：这两个属性虽然看起来隐藏了，但元素仍然占据文档流的位置，而且对屏幕阅读器也不友好。相比之下，display: none语义更清晰，性能也更优。 - 断点值不是写死的：600px只是常见的移动端阈值，实际项目中最好结合具体设计稿和真实设备测试结果来确定。Chrome DevTools的设备模拟器是一个很好的验证工具。
- 别忘了无障碍支持：给
.mobile-banner加上role="banner"和合适的aria-label，确保屏幕阅读器能正确识别上下文，这是现代Web开发的必需项。 - 保持渐进增强意识：即使CSS加载失败，用户至少能看到基础HTML内容（桌面版）。这种设计保证了核心功能在任何情况下都可用。
✅ 总结
回过头来看整个方案：不依赖一行JavaScript，纯粹依靠语义化的HTML结构、精准的媒体查询以及display属性的控制，就能实现窗口缩小时头部内容完全替换的交互效果。这个方法轻量、可靠，且易于维护，已经属于现代响应式开发的标准实践。后续如果有更复杂的需求，比如平板专属版本，或者想通过CSS自定义属性配合伪元素实现更灵活的文本切换，也可以在这个基础上扩展。但对于绝大多数场景，这种双结构+显示控制的方案已经足够优雅了。