@media隐藏元素最可靠的方式是用display: none按视口断点精准控制，首选414px（iPhone Pro竖屏），兼顾360px（中端安卓）和768px（iPad竖屏），避免内联样式和伪隐藏，确保选择器命中且无覆盖。
用 @media (max-width: ...) 隐藏元素是响应式中最直接可靠的方式，核心在于“在小屏下取消显示”，而不是检测设备类型。
选对断点值很关键
断点不是随便写的，要匹配真实用户看到的视口宽度：
- 414px：覆盖 iPhone 12/13/14/15 Pro 系列竖屏，目前最常用的小屏断点
- 360px：适配中端安卓手机（如部分 Redmi、荣耀机型）
- 768px：传统 iPad 竖屏，但注意现在很多折叠屏合起来也小于这个值
别写死“手机=768px以下”，优先按设计需求和测试真机结果定断点。
样式必须作用到目标元素本身
隐藏失效，八成是因为选择器没命中或被其他样式覆盖：
立即学习“前端免费学习笔记（深入）”；
- 给图片加类名：
<img src="ad.jpg" class="mobile-hidden" alt="HTML5 中媒体查询怎么结合 max-width 实现响应式隐藏" > - 在 CSS 中精准控制：
@media (max-width: 414px) { .mobile-hidden { display: none; } } - 避免用内联样式（
style="display: block"），它优先级高于媒体查询 - 如果父容器已设
display: flex，子元素用display: none依然有效
可以批量控制多个元素
一个媒体查询块里能写多条规则，适合统一处理导航、广告图、侧边栏等非核心内容：
@media (max-width: 414px) { .header-ad, .sidebar, .user-avatar { display: none; } }- 表格列隐藏也一样：
.table-col-actions { display: none; }，再用媒体查询让它在小屏消失 - 注意不要依赖
nth-child隐藏列，列顺序一变就失效；改用语义化属性，比如[data-role="action"]
别用“伪隐藏”替代 display: none
这些方式看似隐藏，实际图片仍在加载或占位：
-
width: 0; height: 0;—— 元素还在文档流，可能影响布局 -
overflow: hidden; max-width: 0;—— 图片资源照常下载，浪费流量 -
visibility: hidden;—— 占空间、不释放渲染资源
真正想省流量、提性能、简化小屏界面，就用 display: none，干净利落。
