最稳妥的小屏隐藏方式是@media (max-width: 767px)中对定位元素设display: none；仅用position: absolute或left: -9999px无法真正隐藏，存在交互残留、可访问性及兼容性风险，且需同步管理aria-hidden与tabindex确保键盘导航可用。
直接用 @media (max-width: 768px) 套住定位元素的样式块，再设 display: none 是最稳妥的做法。其他方式（比如只改 visibility 或 opacity）容易导致交互残留或布局错乱。
为什么不能只靠 position: absolute 隐藏？
绝对定位本身不等于隐藏——它只是脱离文档流，但元素仍渲染、仍占位（除非配合 clip-path 或移出视口）、仍可能响应点击或被屏幕阅读器读取。小屏下若仅靠 left: -9999px 移出屏幕，滚动时可能意外暴露，且无法保证所有设备视口宽度一致。
-
position: absolute+left: -9999px在某些 iOS Safari 版本中会被截断失效 - 移出视口的元素仍会触发
focus或键盘导航，影响可访问性 - 如果父容器有
overflow: hidden，反而可能把元素“裁掉”但未真正隐藏
display: none 在媒体查询里怎么写才不出错？
必须确保媒体查询的断点值和定位元素的选择器能精准匹配，否则样式不会生效。常见错误是选择器层级太深、被更高优先级样式覆盖，或断点单位写错（比如用 em 而非 px 导致计算偏差）。
- 断点推荐用
px单位，如@media (max-width: 767px)（注意是767而非768，避免边界重叠） - 避免用内联样式覆盖媒体查询，
style="display: block"会强制生效，绕过 CSS 规则 - 若元素本身已设
position: absolute，隐藏时无需额外处理定位属性，display: none会直接移除渲染
小屏隐藏后，要不要考虑键盘焦点和屏幕阅读器？
要。单纯 display: none 已让屏幕阅读器跳过该元素，但若你在 JS 中动态显示它（比如点击菜单按钮后），需同步管理 aria-hidden 和 tabindex。否则小屏用户用键盘导航时可能卡在不可见元素上。
立即学习“前端免费学习笔记（深入）”；
- 隐藏时加
aria-hidden="true"是冗余的——display: none已隐式生效 - 显示时务必补回
aria-hidden="false"并设tabindex="0"，否则键盘用户无法聚焦 - 别依赖
visibility: hidden替代，它虽保留占位，但屏幕阅读器仍可能读取内容
真正麻烦的不是写那几行媒体查询，而是隐藏之后的交互链路是否完整——比如菜单按钮显示了，但点击后定位弹层没正确挂载、焦点没落到第一个可操作项、返回时没恢复原状态。这些细节比隐藏本身更容易出问题。
