Vuetifyを使用していて、画面サイズに応じて要素の表示を切り替える場合は、
hidden-{breakpoint}-{condition}というclassを記述します。
breakpointは、以下のように画面サイズを定義します。
| 記述 | 画面サイズ |
|---|---|
| xs | 600px以下 |
| sm | 600以上 960px以下 |
| md | 960px以上 1264px以下 |
| lg | 1264以上 1904px以下 |
| xl | 1904以上 |
conditionは、以下のように条件を定義します。
| 記述 | 条件 |
|---|---|
| only | 指定した画面サイズでのみ非表示 |
| and-down | 指定した画面サイズ以下で非表示 |
| and-up | 指定した画面サイズ以上で非表示 |
例えば、md以下のサイズで非表示としたい場合は、以下のように記述します。
<div class="hidden-md-and-down">
hogehoge
</div>
以下の公式のドキュメントに詳しく載っています。
CSS Display helpers — Vuetify.js