通过HTML预设桌面版与移动端两套结构，结合CSS的`display`属性和`@media`媒体查询，在视口宽度变化时切换显示或隐藏对应内容，即可实现纯CSS响应式头部文案替换，无需JavaScript。需注意设置视口标签并优先使用`display:none`。
在构建响应式网站时，经常会遇到这样一个场景：桌面端需要展示完整的分类导航和服务入口，比如“女士/男士/儿童+追踪/联系/下载”，但到了移动端，空间有限，最好的做法是直接放一个简短有力的“下载App”横幅。不少开发者第一反应是用JavaScript控制，但其实这个需求纯CSS就能搞定。核心就两招： 和 @media 媒体查询。说实话，这个技巧在很多场景下非常实用，比如电商网站、工具类应用的首页头部。
实现起来也并不复杂，不需要高深的前端知识。关键在于：在HTML里预先准备好两套结构，用CSS的显示与隐藏属性来响应断点变化。
长期稳定更新的攒劲资源： >>>点此立即查看<<<
动手之前，先确认一件事：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 语义更清晰，性能也更优。.mobile-banner 加上 role="banner" 和合适的 aria-label，确保屏幕阅读器能正确识别上下文，这是现代Web开发的必需项。回过头来看整个方案：不依赖一行JavaScript，纯粹依靠语义化的HTML结构、精准的媒体查询以及display属性的控制，就能实现窗口缩小时头部内容完全替换的交互效果。这个方法轻量、可靠，且易于维护，已经属于现代响应式开发的标准实践。后续如果有更复杂的需求，比如平板专属版本，或者想通过CSS自定义属性配合伪元素实现更灵活的文本切换，也可以在这个基础上扩展。但对于绝大多数场景，这种双结构加显示控制的方案已经足够优雅了。