vueitfy 的 `hidden-sm-and-down` 类会在屏幕宽度 ≤ 960px（即 `sm` 断点及更小）时隐藏元素，导致按钮图标在中等及以下尺寸设备上不可见；应改用 `hidden-xs-only` 或响应式条件渲染来精准控制显示逻辑。
在 Vuetify 中，响应式工具类基于预设断点（xs, sm, md, lg, xl），其中 sm 对应 ≥ 600px，而 sm-and-down 表示 ≤ 960px（注意：Vuetify 2.x 中 sm-and-down 实际覆盖 xs + sm，即 ≤ 960px；Vuetify 3.x 已弃用该写法，统一为 d-none d-sm-flex 等组合）。因此，你代码中使用的 <span class="hidden-sm-and-down"> 本意是“仅在大屏显示图标”，但实际效果却是：当屏幕宽度 ≤ 960px（包括平板、小屏笔记本甚至部分桌面缩放场景）时，图标被强制隐藏——这正是图片在 960px 以下消失的根本原因。
✅ 正确做法取决于设计目标：
-
若希望仅在超小屏（手机）隐藏图标，而在平板（≥ 600px）及以上始终显示，应使用：
<span class="hidden-xs-only"> <!-- 仅在 xs（< 600px）隐藏 --> <img src="/storage/img/btn-lang/en.png" style="width: 40px" /> </span>
-
若希望图标始终可见（推荐用于语言切换等关键功能），直接移除隐藏类：
vue-composition-api-best-practices下载Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
立即学习“前端免费学习笔记（深入）”；
<img src="/storage/img/btn-lang/en.png" style="width: 40px" />
-
更健壮的方案（Vuetify 2.x）：结合 v-if 与 $vuetify.breakpoint 实现运行时判断：
<span v-if="$vuetify.breakpoint.mdAndUp"> <img src="/storage/img/btn-lang/en.png" style="width: 40px" /> </span> <span v-else>EN</span> <!-- 小屏降级为文字 -->
⚠️ 注意事项：
- 避免混淆 hidden-sm-and-down（≤ 960px）与 hidden-md-and-up（≥ 1264px）等命名逻辑；
- Vuetify 3 已废弃所有 hidden-* 类，统一使用 d-none d-[breakpoint]-block（如 d-none d-sm-block）；
- 图标消失问题常伴随布局错位，建议搭配 v-btn 的 icon 属性或 v-icon 组件提升可访问性与一致性。
总结：响应式类不是“直觉命名”，务必查阅 Vuetify 2.x 官方断点文档 或升级至 Vuetify 3 的现代响应式语法，以避免因断点理解偏差引发的 UI 异常。
