只在竖屏手机显示图片需组合类：.d-none .d-sm-block .d-md-none，因竖屏手机属超小屏（<576px），而横屏手机、平板、PC均≥576px，故需先隐藏全部，再在sm起显示，最后在md起再次隐藏。
只在竖屏手机显示图片，PC 和横屏手机都隐藏？用 .d-none .d-sm-block .d-md-none
bootstrap 5（及 4）没有「仅竖屏手机」的内置类，.d-sm-block 的断点是 ≥576px，覆盖了横屏手机（通常 ≥576px）、平板、pc，所以单用它会误显。真正要「只在竖屏手机」（即超小屏、且未横屏）显示，得靠组合：先全局隐藏，再在 sm 起显示，最后在 md 起再次隐藏——因为竖屏手机宽度基本 md 断点是 ≥768px，刚好卡住横屏和更大设备。
-
.d-none：所有设备都不渲染（不占位，不是 visibility:hidden） -
.d-sm-block：≥576px 时恢复为display: block（此时横屏手机已触发） -
.d-md-none：≥768px 时再次设为display: none，把横屏手机、平板、PC 全干掉
示例：
<img src="mobile-only.jpg" class="d-none d-sm-block d-md-none">这样，只有宽度在 576–767px 之间的设备（典型竖屏手机+部分小平板）会显示；真竖屏手机（如 iPhone 14 竖屏 ≈390–430px）反而被
.d-sm-block 漏掉了——所以严格来说，这个组合更适合「窄屏手持设备」，而非纯竖屏。
想让图片在手机上彻底消失，PC 上才出现？用 .d-sm-none .d-md-block
常见误解是加 .d-xs-none，但 Bootstrap 4/5 已移除所有 xs 前缀类（如 .visible-xs-block 或 .hidden-xs），写了也没效果。正确做法是反向控制：在小屏及以上隐藏，中屏起显示。
-
.d-sm-none：≥576px 时隐藏（覆盖横屏手机、平板、PC） -
.d-md-block：≥768px 时显示（跳过横屏手机，从平板开始）
这样，竖屏手机（.d-none，变成 .d-none .d-md-block——即「全灭，只在 ≥768px 显示」。
为什么不用 visibility: hidden 或 opacity: 0？
因为它们只是视觉隐藏，元素仍在文档流里占位，可能撑开容器、影响点击区域、干扰无障碍读取。而 .d-none 是 display: none，DOM 渲染阶段就被跳过，无布局、无尺寸、无交互。如果你用 JS 动态切换显示状态，也要注意：从 .d-none 切回时，浏览器需重排（reflow），但比反复改 visibility 更干净。
- 用
opacity: 0+pointer-events: none可模拟「不可见但保留位置」，但不解决语义和 SEO 问题 - 用
visibility: hidden仍会触发父容器的 min-height 计算，容易导致空白间隙
移动端图片隐藏后，如何避免加载浪费？
类名控制的是 CSS 层面的显示/隐藏，<img> 标签只要在 HTML 里，src 就会被浏览器预加载（即使加了 .d-none）。真想节省流量，得用响应式图片方案：
- 用
<picture>+media属性，让浏览器按视口条件决定是否下载：<picture><source media="(max-width: 575.98px)" srcset=""><img src="desktop.jpg"></picture>
- 或用
loading="lazy"配合 JS 判断window.innerWidth后动态设置src - 服务端 User-Agent 判断更彻底，但增加复杂度
单纯靠 .d-none 隐藏图片，不能阻止请求发出——这点很多人在性能优化时会忽略。
