エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
【Vue.js】レスポンシブ/画面のサイズによってコンポーネントを切り替える方法 - Qiita
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
【Vue.js】レスポンシブ/画面のサイズによってコンポーネントを切り替える方法 - Qiita
はじめに こんにちは、Mottyです。最近Vueを業務で扱うことになったので、関連した項目を書き知るしてい... はじめに こんにちは、Mottyです。最近Vueを業務で扱うことになったので、関連した項目を書き知るしていこうと思います。 今回はレスポンシブデザインについてです。 複雑なレスポンシブデザイン レスポンシブデザインは画面のサイズに応じて最適な形にコードを整えるデザインです。これによってスマホやPCのような画面サイズの異なる媒体でもストレスなく閲覧でき、UXが向上することが期待できます。 Script部分 単純に横並び表示を縦にするのであればflex containerのプロパティを変えればよいですが、表示形式がかなり変わるなどの複雑な形になると、コンポーネントもしくはHTMLブロック単位でがらっと切り替えたほうがいいケースもあるかと思います。 windowのサイズが768以下かそれ以上かをbool型で受け取る変数を用意します。 ウインドウサイズの変更を感知し、画面サイズが大きいか否かの情報