使用媒体查询结合display属性可实现响应式隐藏显示，如小屏隐藏元素；2. 采用视觉隐藏类保留可访问性，确保屏幕阅读器仍能识别内容；3. 结合javascript动态切换class控制元素显示状态，提升交互体验。
在网页开发中，响应式设计是确保页面在不同设备上良好展示的关键。通过CSS控制元素的隐藏与显示，能有效提升移动端或小屏幕下的用户体验。以下是几种常用的响应式隐藏与显示元素的技巧。
使用媒体查询结合 display 属性
最直接的方式是利用媒体查询（@media）配合 display: none 来根据屏幕尺寸控制元素的显示状态。
例如，希望在屏幕宽度小于768px时隐藏某个元素：
@media (max-width: 767px) {
.hidden-on-mobile {
display: none;
}
}
反之，如果只想在小屏幕上显示某个元素（如移动端专属菜单），可以这样写：
立即学习“前端免费学习笔记（深入）”；
.desktop-only {
display: none;
}
<p>@media (min-width: 768px) {
.desktop-only {
display: block; /<em> 或 inline-block、flex 等 </em>/
}
}</p>利用视觉隐藏但保留可访问性
有时需要隐藏元素但又不希望影响屏幕阅读器等辅助工具，这时不宜直接用 display: none，因为它会完全从可访问性树中移除元素。
推荐使用“视觉隐藏”技巧：
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
这个类可以让元素对视觉用户不可见，但仍被读屏软件识别，适合用于无障碍优化。
结合 class 动态切换显示状态
在实际项目中，常通过JavaScript动态添加或移除class来控制响应式显示。比如点击按钮显示导航菜单：
.nav-menu {
display: none;
}
<p>.nav-menu.active {
display: block;
}</p>JavaScript 可以监听窗口大小变化，自动切换状态：
window.addEventListener('resize', function() {
const menu = document.querySelector('.nav-menu');
if (window.innerWidth < 768) {
menu.classList.add('active'); // 小屏幕显示
} else {
menu.classList.remove('active'); // 大屏幕隐藏
}
});
使用 CSS 自定义属性增强灵活性
为了提高维护性，可以借助CSS自定义属性（变量）统一管理断点和显示逻辑：
:root {
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
}
<p>@media (max-width: var(--breakpoint-md)) {
.hide-on-sm {
display: none;
}
}</p>这样一旦需要调整断点，只需修改变量值，无需查找所有媒体查询。
基本上就这些。合理运用这些技巧，既能实现精准的响应式布局控制，又能兼顾性能与可访问性。关键是根据具体场景选择合适的方法，避免过度隐藏或破坏语义结构。
