Vuetifyを効率よくレスポンシブデザインにしたい

Vuetifyのレスポンシブとは

vuetifyのコンポーネント自体、レスポンシブ対応しているためそのままでも問題なさそうです。

ただデザインに合わせてカラム落ちとか表示・非表示はコードで制御していかなければなりません。

割とややこしかったり、方法が何個かあってベストプラティクスを探る必要があったので記事にします。

メディアクエリ

Vuetifyではあらかじめメディアクエリが用意されています。

xs	sm	md	lg	xl	xxl
< 600px	600px > < 960px	960px > < 1280px	1280px > < 1920px	1920px > < 2560px	> 2560px

xsとxxl以外は〜から〜までという範囲になっています。

つまり

• 960px以上は...
• 960px未満は...

というようなデザインにならないことがわかります。

hidden-⚪︎⚪︎-and-down、hidden-⚪︎⚪︎-and-up

hidden-⚪︎⚪︎-and-down、hidden-⚪︎⚪︎-and-upはそれぞれ

• 〇〇以下を非表示
• 〇〇以上を非表示

という指定になります。
こちらを使うと上記の実現がしやすいです。

<v-img
  class="hidden-sm-and-down"
  ...
></v-img>
<v-img
  class="hidden-md-and-up"
  ...
></v-img>

メディアクエリが同じでないことに注意しましょう。

colsのレスポンシブ対応

colsは計12になるように調整します。
例

<v-row>
<v-col cols="10">
...
</v-cols>
<v-col cols="2">
...
</v-cols>

1つ目のv-colを1カラムにしたい場合の方法が以下です。

<v-row>
<v-col cols="12" md="10" lg="10" xl="10">
...
</v-cols>
<v-col cols="2">
...
</v-cols>

上記方法にすれば960px以下で1カラムになります。

displayプロパディでの表示・非表示

その他表示非表示の方法としてdisplayプロパディを使う方法があります。
上記例の続きですが<v-col cols="2">が半端な状態で存在していることになっています。

そのためこちらのv-colを非表示にします。

<v-row>
<v-col cols="12" md="10" lg="10" xl="10">
...
</v-cols>
<v-col cols="2" class="d-md-block d-none">
...
</v-cols>

ここがややこしいとこではありますが、mdは〜から〜までという幅の指定でしたが
d-md-blockとなると幅が960px以上で要素を表示するためのクラスとなります。
したがって、mdサイズ以上のデバイスではこのカラムが表示されます。

paddingとmarginのレスポンシブ対応

便利なspacing クラスのpaddingとmarginですが、これも少々分かりづらさがあります。
pr-0はpadding-right:0という意味ですが、960px以下は0pxにしたいという場合は以下のようにします。

class="pr-md-6 pr-0"

この場合、pr-mdが960px以上を指しているので、
960px以上はpadding-right: 24px、
それ以外がそれ以下はpadding-right: 0となります。

scssにmediaqueryでレスポンシブ対応

前述したものでやり方がうまくいかない場合は、最終手段としてscssを書くのがいいかなと思っています。

<style lang="scss" scoped>

.container {
  padding-top: 0;
  @media screen and (max-width: 960px) {
    padding-left: 0;
    padding-right: 0;
  }
}
.card {
  margin-bottom: 0;
  @media screen and (max-width: 960px) {
    border-radius: 0 !important;
    border: none;
  }
}
</style>