响应式布局中首选 display 切换控制显隐，推荐移动优先默认设 display: none，大屏断点设为 block；注意 display: none 会移除渲染流且影响可访问性，慎用于交互控件，可辅以 visibility、opacity 或工具类提升灵活性与可维护性。
在响应式布局中，通过断点切换元素的 display 属性（如 display: none ↔ display: block）是最常用、最直接的隐藏/显示控制方式，但需注意语义、可访问性和性能细节。
用媒体查询配合 display 切换
核心做法是在不同断点下重写目标元素的 display 值。推荐在基础样式中定义默认状态（通常是大屏可见），再在小屏断点中隐藏，或反之。
- 避免在多个断点中重复写
display: block，只需覆盖需要变更的状态 - 优先使用移动优先（mobile-first）：默认设为
display: none，在较大断点中设为display: block - 若元素本身是行内元素（如
span），隐藏时用display: none即可；显示时按需设为block、inline-block或flex等
display: none 的隐藏本质与注意事项
display: none 会完全移除元素的渲染流——它不占空间、不可聚焦、屏幕阅读器默认跳过。这适合真正“不需要”的内容（如桌面端侧边栏、移动端导航按钮）。
- 不要对需要键盘导航或屏幕阅读器感知的交互控件（如跳转链接、表单按钮）滥用
display: none - 若只是视觉隐藏但仍需被辅助技术读取，改用
visibility: hidden或clip-path: inset(100%)+position: absolute等无障碍友好方案 -
display: none会触发浏览器重排（reflow），但现代浏览器优化较好，一般无需担忧
替代 display 的轻量级隐藏方式
某些场景下，display 切换可能过于“重”，可考虑更精细的控制：
立即学习“前端免费学习笔记（深入）”；
-
visibility: hidden / visible：保留占位空间，适合动画过渡或临时隐藏 -
opacity: 0 / 1+pointer-events: none / auto：实现淡入淡出效果，同时禁用交互 - CSS 自定义属性 +
display: var(--disp, block)：便于 JS 动态控制，但兼容性需留意
结合 class 控制比纯媒体查询更灵活
为提升可维护性，建议将隐藏逻辑封装成工具类，而非全靠媒体查询硬编码：
.d-none { display: none !important; }
.d-md-block { display: block !important; }
@media (min-width: 768px) { .d-md-block { display: block !important; } }
@media (min-width: 992px) { .d-lg-block { display: block !important; } }
这样可在 HTML 中按需组合：<div class="d-none d-md-block">仅中屏及以上显示</div>，语义清晰、复用性强。
