vuetify 中 `hidden-sm-and-down` 类会导致图片在屏幕宽度小于 960px 时被隐藏，实际应使用 `hidden-xs-only` 或响应式逻辑控制图标显示，本文详解原因与正确用法。
问题根源在于 Vuetify 的断点类命名规则与实际行为的误解。hidden-sm-and-down 并非“仅在小屏及以上隐藏”，而是 从 sm 断点（960px）开始向下所有尺寸均隐藏——即：当视口宽度 ≤ 960px（含 sm, xs）时，该元素将被隐藏。这正是按钮图标在屏幕小于 960px 时消失的根本原因。
✅ 正确做法取决于设计目标：
- 若希望仅在超小屏（xs，<600px）隐藏图标，保留 sm 及以上显示 → 使用 hidden-xs-only；
- 若希望在 xs 和 sm 下均显示图标（即所有移动设备可见）→ 移除 hidden-* 类，或改用 d-none d-sm-block 等显式控制；
- 更推荐语义化写法：用 d-sm-none d-md-block 实现「仅在中屏及以上显示」。
以下是修复后的代码示例（推荐方案：图标在所有移动端保持可见，兼顾可用性）：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
<v-container fluid>
<v-row>
<v-col cols="12" sm="6" xs="6" class="py-2">
<v-btn-toggle borderless>
<v-btn value="left">
<!-- 移除 hidden-sm-and-down，确保小屏可见 -->
<img src="/storage/img/btn-lang/en.png" alt="English" width="40" />
</v-btn>
<v-btn value="center">
<img src="/storage/img/btn-lang/pt.png" alt="Português" width="40" />
</v-btn>
<v-btn value="right">
<img src="/storage/img/btn-lang/es.png" alt="Español" width="40" />
</v-btn>
</v-btn-toggle>
</v-col>
</v-row>
</v-container>⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- Vuetify 2.x 断点定义：xs (<600px), sm (≥600px), md (≥960px), lg (≥1264px), xl (≥1904px)；
- hidden-sm-and-down = 隐藏于 sm, xs 尺寸（即 ≤960px），不是“仅在 sm 及以下隐藏”，而是“从 sm 开始向下全部隐藏”；
- 建议优先使用 d-* 工具类（如 d-none d-sm-flex）替代旧式 hidden-*，语义更清晰、兼容性更好；
- 图标按钮务必添加 alt 属性以满足无障碍访问要求。
总结：排查此类响应式显示问题，首要核对 Vuetify 断点类的实际生效范围，避免望文生义。善用 Vuetify 官方断点文档 进行验证，可大幅提升响应式开发效率与可靠性。
