Vuetifyのレスポンシブデザインを実装する前に知っておくべき事は以下の3つです。これさえマスターすれば恐れる事は何もありません。 1. Grid system 1. Breakpoint service 1. mobile-breakpoint 使用例を交えながら順に解説します。 ## 1. Grid system - [Grid system](https://vuetifyjs.com/ja/components/grids/): `v-container`、`v-row`、`v-col`を用いて、コンテンツの配置・調整をできる機能 - vuetifyが備える５種類のメディアブレークポイント | 識別子| 範囲| |:---:|:---:| |xs | 600px未満| |sm | 600px以上、960px未満| |md | 960px以上、1264px未満| |lg | 1264px以上、1904px未満| |xl | 1904px以上| - `v-row`の中ではデフォルトで12個の`v-col`までなら１行で表示することが可能 - `v-col`に`cols=1`を指定すること ```vue ``` 【動作イメージ】 ![Kapture 2021-02-15 at 21.43.34.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397734/f0348098-2304-e2b2-4674-5a6512e8d94b.gif) ※ `cols=1`を指定しているため、画面幅を変更しても`１行12列`は保たれます > さらに`v-col`を**１**つ増やすとGrid systemの機能上、`v-row`配下の要素数が**12**を超えるため改行されて表示されます ![スクリーンショット 2021-02-15 21.41.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397734/172f6702-5425-0814-1ea3-cef018843674.png?d=10) ### 例：画面幅が`xs`(600px未満)の時だけ`１列`にしたい場合の手順 - `cols`の合計値が**12**を超えると改行されるため、各`v-col`に`cols="12"`を指定する - `xs`以外のメディアブレークポイント時は１行で表示されるよう以下も指定する - `sm="1" md="1" lg="1" xl="1"` ```vue ``` 【画面イメージ】 ![Kapture 2021-02-15 at 22.05.34.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397734/61744d7b-ac63-dcf9-43c6-616f73033c15.gif) ※ `v-col`では`xs`のブレークポイントが存在しないため、画面幅が600pxの場合は`cols`の値が優先されるhttps://vuetifyjs.com/ja/components/grids/#breakpoint-sizing --- - 画面幅が`xs(600px未満)の時以外`は`3行4列`にしたい場合は、`cols以外の値`に**3**を指定します ```vue ``` ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397734/f1b4cd1a-9e5f-fd3e-f654-20c56e0b7369.png) ## 2. Breakpoint service - [Breakpoint service](https://vuetifyjs.com/en/features/breakpoints/#breakpoint-service)：画面幅のサイズを検知して論理値を返してくれる機能 ### 例：ツールバーの表示項目を制御したいとき ```vue:ToolBar.vue ``` 上記テンプレートの場合、画面幅を小さくすると、ツールバーの項目が被ってしまいます |画面幅が広い |画面幅が狭い | |:---:|:---:| |![スクリーンショット 2021-02-15 22.25.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397734/f7c38fa0-7e32-7d8a-454b-4ccf101f278e.png)|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397734/05947b64-6d68-4cb2-573e-fa2b6662c03a.png)| `ツールバーボタン`を非表示にしたい場合は、に`v-if="!$vuetify.breakpoint.xs"`をv-btnに指定する事で、画面幅がxs(600px)未満の場合に非表示にさせることができます。 ```vue ``` 【動作イメージ】　　 ![Kapture 2021-02-15 at 22.33.09.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397734/be390ca9-c761-8a3f-5b98-23731d9c58a5.gif) > $vuetify.breakpoint.○○では、〇〇の値を各メディアタイプの識別子に変更する事で、それぞれの画面幅で切り替え値を取得することができます。 ## 3. mobile-breakpoint - mobile-breakpoint：Vuetifyコンポーネントに存在する属性値 - `v-data-table`や`v-navigation-drawer`に存在します - 見た目の表示を切り替える境界値です今回は、公式サイトの[v-data-table](https://vuetifyjs.com/zh-Hans/components/data-tables/#section-63d269fd)を例に解説します。 ```vue

Account Tickets