サイト制作 レスポンシブデザイン 手順について

Question

初心者過ぎる質問かもしれませんが、、

メディアクエリを使ってコードを書く具体的な流れとしては以下で正しいのでしょうか。

１．レスポンシブ用のファイルの作成(responsive.cssとか命名して)
２．htmlファイルへの読み込み
３．htmlファイル、headタグへのviewportの記述
４．メディアクエリの記述(@media～)
５．コード記述が済んでるPC版のコードをメディアクエリ内にコピペ
(最近はモバイルファーストで、PC用は後に書くことも多いみたいですね)
６．レスポンシブ対応させたいCSSを書き換える

５．６のところで、progateでは、全体をコピペして書き替えるのではなく、部分的に再記述をしていました。処理速度などに違いが出るものなのでしょうか。

例）
＠media　screen and (max-width:680px)｛

この中に作成済みコードをコピぺする
変えたい箇所だけ書き換える

｝

Answer 1

1〜6の流れで概ね大丈夫かと思います。

５．６のところで、progateでは、全体をコピペして書き替えるのではなく、部分的に再記述をしていました。処理速度などに違いが出るものなのでしょうか。

処理速度というよりも、そうせざるをえないかと思います。

なぜなら、デバイスの種類は非常に繁多であり、全デバイスに対応させるには、
メディアクエリ外の、デフォルト値の設定が必要不可欠だからです。

だいたいは、モバイルファーストなら、横750pxのデバイスをデフォルトにして、
（現代なら、920pxとかもっと大きめでもいいかも）
それ以外のサイズを、メディアクエリで上書きする、という形をとります。
（PCを基準にする時もあります）

Comments

[yuktkhs]

ありがとうございます！