Vuetify中如何仅让元素对md尺寸设备可见？相关隐藏类无效

嘿，我之前在项目里也遇到过一模一样的问题！Vuetify的响应式隐藏/显示类看起来简单，但有时候组合起来容易踩小坑。你要实现仅md尺寸可见的需求，其实有两种靠谱的方法，我给你拆解清楚：

方法1：用Vuetify的hidden类组合（调整你之前的思路） #

Vuetify的hidden-{breakpoint}-and-up/hidden-{breakpoint}-and-down类是用来批量隐藏断点范围的。要让元素只在md显示，本质就是同时隐藏md上下两个范围的设备：

• 隐藏**md以下（sm及更小）**的设备 → 加hidden-sm-and-down
• 隐藏**md以上（lg及更大）**的设备 → 加hidden-lg-and-up

之前没生效大概率是漏加了其中一个类，或者类名拼写错误。正确的代码示例：

<div class="hidden-sm-and-down hidden-lg-and-up">
  我只在md尺寸（默认960px-1263px）显示哦！
</div>

方法2：用d-*显示类（更直观，推荐） #

Vuetify的d-{breakpoint}-{display-value}类可以直接控制不同断点下的显示状态，逻辑更清晰：

• d-none：默认所有设备隐藏
• d-md-block：md尺寸下改为块级显示
• d-lg-none：lg及以上尺寸又变回隐藏

代码示例：

<div class="d-none d-md-block d-lg-none">
  我只在md尺寸显示！
</div>

排查没生效的可能原因 #

如果还是不行，可以检查这几点：

• 有没有自定义修改过Vuetify的断点配置？比如把md的范围改了，那类的匹配就不对了
• 有没有自己写的CSS覆盖了这些类的display属性？比如用了!important的样式
• 类名是不是拼写错误？比如把lg写成gl，或者sm写成ms

内容的提问来源于stack exchange，提问作者Martin