@media隐藏元素最可靠的方式是用display: none按视口断点精准控制，首选414px（iPhone Pro竖屏），兼顾360px（中端安卓）和768px（iPad竖屏），避免内联样式和伪隐藏，确保选择器命中且无覆盖。

用 @media (max-width: ...) 隐藏元素是响应式中最直接可靠的方式，核心在于“在小屏下取消显示”，而不是检测设备类型。

选对断点值很关键

断点不是随便写的，要匹配真实用户看到的视口宽度：

• 414px：覆盖 iPhone 12/13/14/15 Pro 系列竖屏，目前最常用的小屏断点
• 360px：适配中端安卓手机（如部分 Redmi、荣耀机型）
• 768px：传统 iPad 竖屏，但注意现在很多折叠屏合起来也小于这个值

别写死“手机=768px以下”，优先按设计需求和测试真机结果定断点。

样式必须作用到目标元素本身

隐藏失效，八成是因为选择器没命中或被其他样式覆盖：

财经HTML高端海报生成

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

• 给图片加类名：
• 在 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，干净利落。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！