ブレークポイント

Vuetify は、使用可能なブレークポイントをアプリケーション内からアクセス可能なオブジェクトに変換します。これにより、ビューポートのサイズに基づいて特定のプロパティと属性を割り当て/適用できます。オブジェクトは$vuetify.breakpointにあります。

独自のブレークポイントで閾値をピクセル数で定義できますが、現在は 2 段階のプロセスです: 1. スタイルを更新するには、$grid-breakpoints SASS 変数をオーバーライドする必要があります（SASS variables を参照してください）。2. javascript 側で同じ値を使用するには、アプリケーションのブートストラップ中に次のように渡す必要があります：

実際の例を試してみましょう。モバイル デバイスで フルスクリーン ダイアログに変換する v-dialog コンポーネントがあります。通常は、ビューポートのサイズを監視したり、ページが読み込まれるたびにチェックしたりする必要があります。

これは多くの定型文です。組み込みの v-resize ディレクティブを使用することを選択した場合でも、サイズ変更メソッドを定義する必要があります。 breakpointオブジェクトを使用すると、このロジックを完全にスキップして、アプリケーションのビルドに戻ることができます。

We can simplify this process by simply checking the value of the mobile property on the $vuetify.breakpoint object.