【Vue + vue-mq】レスポンシブ対応でのVue実装について - Qiita

目次 ・レスポンシブ対応での課題 ・レスポンシブ対応での課題解決方法 ・vue-mqとは ・vue-mqの実装方法 ・vue-mqでのデメリット ・vue-mqのseo要件が満たされない可能性とは ・vue-mq実装時の動き レスポンシブ対応での課題 一般的な実装方法としては、PCやスマホなど各デバイス毎に各HTMLファイルを複数用意し最適化する手法を取っています。 レスポンシブ対応では、1つのHTMLファイルを、CSS3（Media Queries）で制御し、異なる画面サイズに応じてページのレイアウト・デザインを調整します。 その際、ここで問題となるのが「1つのHTMLファイル」。 一般的な実装方法を先ほど記載しましたが、基本PC・SPでHTMLが分かれている。 つまり、PC用のデザイン、SPの用のデザインとなっているため、それに合わせてHTML構造も異なります。 レスポンシブ対応する際