@media 配合 display: none 可隐藏图片，但需确保 viewport 元标签存在、CSS 加载顺序正确、选择器权重足够；若需阻止请求，须用 <picture> 且 <source> 在 <img> 前；断点应依容器实际宽度设定，非固定值。
直接用 @media 配合 display: none 就能隐藏，但多数人卡在断点没对上、<picture> 顺序写错、或漏了 <meta name="viewport"> —— 这三处任一出问题，图片都“藏不住”。
为什么写了 @media (max-width: 414px) { img { display: none; } } 却不生效
90% 的失效不是 CSS 写错了，而是媒体查询根本没触发：
- 检查页面
<head>顶部是否写了<meta name="viewport" content="width=device-width, initial-scale=1.0">；没这行，手机浏览器默认按 980px 渲染，max-width: 414px永远不匹配 - 打开 Chrome DevTools → 切「Responsive」模式 → 看右上角显示的实际视口宽度，不是设备型号
- CSS 加载顺序错误：如果通用样式表在媒体查询之后加载，基础
display值会被覆盖，导致断点规则失效 - 选择器权重不够：比如内联
style="display: block"会强制覆盖 CSS 文件里的display: none
<picture> 中用 <source media> 跳过加载，不是视觉隐藏
如果目标是「小屏压根不请求大图」，display: none 是无效的——图片早已下载完毕。必须用 <picture> 让浏览器跳过 HTTP 请求：
-
<source>必须写在<img>标签之前，顺序即匹配优先级 -
media值是标准 CSS 媒体查询字符串，例如(min-width: 769px)或(orientation: landscape)，不支持 JS 表达式 - 兜底的
<img src>一定会被加载（除非所有<source>都匹配且浏览器完全不支持<picture>），所以它的src应该是最小、最快、最安全的资源（如 SVG 占位符） - 示例：只在桌面端加载 WebP 大图，移动端用轻量图标
<picture> <source media="(min-width: 769px)" srcset="hero.webp" type="image/webp"> <source media="(min-width: 769px)" srcset="hero.jpg" type="image/jpeg"> <img src="logo-icon.svg" alt="logo"> </picture>
别用 visibility: hidden 或 opacity: 0 替代 display: none
它们看起来都“看不见”，但行为完全不同：
立即学习“前端免费学习笔记（深入）”；
-
visibility: hidden仍占布局空间，侧边栏隐藏后主内容区不会自动填满，文字可能异常换行 -
opacity: 0元素仍在文档流中、可接收click和tab焦点，键盘用户能聚焦到不可见按钮上，违反可访问性原则 - 真正需要“彻底移除”的场景（如小屏下收起广告图、非核心 banner），只能用
display: none - 若需保留语义但不可见，应组合使用
display: none+aria-hidden="true"
断点值不能硬套 768px，得看设计稿容器实际渲染宽度
断点不是“手机就 768px 以下”，而是该图片所在容器在小屏下被压缩到无法接受尺寸时的临界宽度：
- iPhone 15 Pro 是 430px 宽，主流安卓中端机是 360px 或 414px，iPad 竖屏是 768px —— 推荐按这四档设断点：
360px、414px、768px、1024px - 如果图片放在一个栅格列里，该列在小屏下宽度崩到 80px，那断点就该设
max-width: 320px，而不是盲目跟风 414px - 用 Chrome DevTools 的「Layout Shift Regions」或「Computed」面板，查看图片父容器在不同宽度下的实际
width值，再反推断点
最容易被忽略的是：即使你把 display: none 写对了，如果图片本身是通过 src 直接写的高清图，它已经在小屏上下载完了——所谓“隐藏”，只是把已经到手的资源藏起来而已。
