最稳妥方案是用 display: none 配合媒体查询，但需兼顾设备能力判断、可访问性控制和 js 交互清理；推荐移动优先写法，先设 display: none 再大屏恢复，并注意 dom 存在性与屏幕阅读器兼容问题。
直接用 display: none 配合媒体查询是最稳妥的方案，但必须配合设备能力判断、可访问性控制和 JS 交互清理，否则容易在真机或辅助工具中出问题。
为什么不能只写 @media (max-width: 768px)
硬写像素断点会漏掉大量真实场景：iPhone SE 是 375px，折叠屏展开后可能达 800px+ 却仍是手持设备；部分安卓平板横屏超 1024px，却该隐藏桌面侧边栏。更可靠的方式是叠加指针与悬停能力判断：
-
@media (max-width: 480px) and (pointer: coarse)—— 精准覆盖小屏触控设备 -
@media (hover: none) and (pointer: coarse)—— 排除所有带鼠标/精细指针的设备 - 避免用
max-device-width（多数浏览器已忽略）
display: none 在媒体查询里怎么写才不翻车
常见错误是只在小屏下设 display: none，却依赖默认 display 值（比如 div 默认是 block，但 span 是 inline），导致桌面端不显示。推荐移动优先写法：
- 先声明默认状态：
.sidebar { display: none; } - 再在大屏恢复：
@media (min-width: 769px) { .sidebar { display: block; } } - 类名语义清晰，如
.hidden-mobile，避免和 Bootstrap 的d-none d-md-block混用
隐藏后 JS 和屏幕阅读器还管不管用？
display: none 会让元素彻底退出渲染流，但 DOM 节点仍在，这带来两个隐性风险：
- 如果该元素绑了
click或focus事件，JS 仍会执行回调——需同步removeEventListener或加条件判断绕过 - 屏幕阅读器默认跳过
display: none元素，但如果它包裹关键导航链接，会导致信息缺失；此时应改用aria-hidden="true"+visibility: hidden组合，或保留结构仅视觉隐藏 - 表单字段不能简单
display: none，提交前要确保其值被清除或逻辑跳过，否则后端可能收到空值报错
真正难的不是加几行 CSS，而是每次隐藏都要问一句：这个元素是否还在焦点流里？它的数据是否还参与 JS 计算？服务端有没有把不该发的内容也吐出来了？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
