最直接隐藏移动端元素的方法是 display: none，它移出渲染流、不占位、不响应事件，但需注意父容器层叠上下文影响、JS事件残留、SSR内容泄露及断点应按视口能力而非设备类型设定。
用 display: none 隐藏移动端元素最直接，但会彻底移出渲染流
移动端不需要的元素，比如桌面端侧边栏、大图 Banner、复杂筛选器，最常用做法就是加 display: none。它生效快、兼容性好（连 IE8 都支持），但要注意：一旦隐藏，该元素不再占位、不响应事件、也不参与任何布局计算。
常见错误是只在 @media (max-width: 768px) 里写 display: none，却忘了检查父容器有没有 overflow: hidden 或 transform，导致子元素虽然隐藏了，但触发了层叠上下文，意外影响其他动画或定位。
- 优先用
display: none而不是visibility: hidden—— 后者仍占空间，可能撑开页面、引发滚动条闪现 - 如果该元素绑了 JS 事件（比如
click监听），隐藏后事件依然存在，但用户点不到；需要确认是否要同步removeEventListener或用条件逻辑绕过 - SSR 渲染时，
display: none不阻止 HTML 输出，若内容敏感或影响首屏性能，得配合服务端判断或动态加载
media 查询断点别硬写 768px，按设备能力而非设备类型写
写死 @media (max-width: 768px) 是典型误区。iPad 竖屏是 768px，但很多安卓平板横屏也超 768px，结果该隐藏的没隐藏；而某些折叠屏手机展开后宽度远超 1024px，却因“是手机”被误判。
真正该看的是视口能力，不是 UA 字符串：
立即学习“前端免费学习笔记（深入）”；
- 用
@media (max-width: 480px)覆盖小屏手机（如 iPhone SE） - 用
@media (hover: none) and (pointer: coarse)判断触屏设备，比查max-width更可靠 - 如果目标是“仅桌面显示”，推荐
@media (hover: hover) and (pointer: fine)，能准确排除绝大多数触摸设备
用 content-visibility: hidden 做性能优化？目前别用
content-visibility: hidden 听起来很诱人——既能隐藏又保留渲染状态，适合长列表懒加载。但它和 display: none 完全不是一回事，而且目前支持度有限。
实际踩坑点很具体：
- Chrome 85+ 支持，但 Safari 和 Firefox 完全不认这个值，写了等于白写
- 即使支持，它只对「可滚动容器内的块级元素」有效，对
inline元素、position: fixed元素无效 - 它不会阻止子元素的
animation或transition，隐藏后动画仍在后台跑，可能吃 CPU - 更麻烦的是：它不触发
resize或scroll事件，JS 无法感知“它什么时候真被隐藏/显示”
隐藏后还要留访问入口？别用 display: none 直接套按钮
比如“移动端收起侧边栏”，很多人把汉堡按钮和侧边栏一起塞进 display: none 容器里，结果按钮也消失了——用户根本点不到入口。
正确做法是分层控制：
- 汉堡按钮始终可见（用
display: block或默认inline） - 侧边栏本身用
display: none，但通过 JS 切换is-open类来控制显隐 - 如果要用 CSS 动画展开，别用
display切换，改用max-height+overflow: hidden或transform: translateX()
最常被忽略的一点：屏幕阅读器用户依赖 DOM 结构获取导航。单纯 display: none 会让元素对辅助技术完全不可见。需要隐藏视觉但保留语义时，得加 aria-hidden="true" 或用 clip-path + border: 0 + width: 1px 这类组合。
