display: none 配合媒体查询是移动端隐藏非核心内容的首选方案，它真正移出渲染流、不占空间、不触发重排且屏幕阅读器默认跳过；需采用移动优先写法并注意断点设置、权重控制、JS兼容性及无障碍处理。
用 display: none 配合媒体查询是最直接有效的方案
移动端隐藏侧边栏、大图 Banner、复杂筛选器这类非核心内容，display: none 是首选——它真正移出渲染流，不占空间、不触发重排、屏幕阅读器默认跳过。别被“先写 visibility 再改 opacity”的教程带偏，那在响应式里是给自己埋坑。
常见错误是只写断点不写默认状态：比如只在 @media (max-width: 768px) 里设 .sidebar { display: none; }，却依赖浏览器对 .sidebar 的原始 display 值（可能是 block，也可能是 flex 或 inline-block），结果某些 UI 库或重置样式一覆盖就失效。
- 推荐移动优先写法：
.sidebar { display: none; }先设默认隐藏，再用@media (min-width: 769px) { .sidebar { display: block; } }显式恢复桌面端显示 - 断点别硬写
768px：iPad 竖屏刚好卡在边界，横屏安卓平板可能超 800px 却仍是触屏设备；更稳妥的是加设备能力判断，例如@media (max-width: 767px) and (pointer: coarse) - 避免用
max-device-width：现代浏览器基本忽略它，且 DevTools 模拟器返回值不可靠，统一用width
为什么不用 visibility: hidden 或 opacity: 0
visibility: hidden 保留占位，小屏下侧边栏看不见但主内容仍被挤到右边，留出大片空白——这是响应式布局错位的高频原因。opacity: 0 更危险：元素不仅占位，还响应点击、能被聚焦、屏幕阅读器照读不误，纯属“假装消失”。
唯一适合 visibility: hidden 的场景，是轮播图预加载容器这类需要尺寸稳定、切换时防抖动的组件。但它不支持 transition: visibility，真要做淡入必须搭配 opacity 或 transform。
立即学习“前端免费学习笔记（深入）”；
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
-
getBoundingClientRect()在visibility: hidden下仍返回真实尺寸；而display: none返回全为 0——JS 初始化逻辑（如下拉菜单高度计算）极易因此崩掉 - 父元素设
visibility: hidden，子元素可设visibility: visible局部透出（如模态框关闭按钮）；但display: none是硬切断，子元素无法用display: block恢复 - 若用了
visibility: hidden，必须手动加aria-hidden="true"，否则屏幕阅读器仍会朗读
CSS 优先级和选择器权重经常让 display: none 失效
写了媒体查询却没隐藏？八成是 CSS 权重被更高优先级规则覆盖了。比如全局样式里 .header .desktop-only { display: block; } 权重为 0,2,0，而你在媒体查询里只写 .desktop-only { display: none; }（权重 0,1,0），后者直接被无视。
React/Vue 组件内联样式或 style 属性也会盖过外部 CSS 规则，导致隐藏失败。
- 确保媒体查询内的选择器权重 ≥ 基础规则，例如写成
.mobile-layout .desktop-only { display: none; } - 真机调试时，用浏览器开发者工具的“Computed”面板看最终生效的
display值，而不是只盯 Styles 面板里的声明 - 避免在多个断点中反复切换同一元素的
display，比如max-width: 768px设none，max-width: 480px又设回block——加载顺序或 SSR 渲染时机稍有偏差就会错乱
隐藏后 JS 行为和无障碍容易被忽略
display: none 不等于 DOM 删除。元素还在，JS 仍能获取它、绑定事件、读取 dataset，但 offsetHeight 和 getBoundingClientRect() 全是 0。轮播图初始化、下拉菜单定位、第三方 SDK（如地图、支付弹窗）常因此报错或白屏。
更隐蔽的问题是无障碍：纯装饰性 Banner 隐藏后，若没加 aria-hidden="true"，屏幕阅读器仍可能尝试朗读其内容；而表单字段或关键导航链接若被隐藏，会直接破坏可访问性路径。
- JS 判断显隐状态，别只靠 class 名，要用
getComputedStyle(el).display === 'none' - 隐藏图片或 iframe 时，确认它们不会在隐藏状态下发起网络请求（现代浏览器已优化，但低版本 WebView 需验证）
- 父容器设
display: none后，子元素若用了position: fixed或absolute，可能意外脱离视口并触发滚动条——得单独重置其position或visibility
