ドットインストールCSS レスポンシブウェブデザイン編です
要点だけまとめてみたので、後で振り返り用としておきます
レスポンシブウェブデザインとは
ブラウザ幅に合わせてレイアウトを変えていくためのテクニック
viewport
日本語に訳すと「表示領域」という言葉が分かりやすい
メタタグのviewportを対応させたいブラウザに変更させる
Media Queries
表示された画面環境に応じて適用するスタイルを切り替える機能
viewportの幅ごとにスタイルを指定いく
ブレイクポイント
スタイルが切り替わるときの、viewportの幅をブレイクポイントと呼ぶ
全てのブレイクポイントにメディアクエリの記述を入れると大変なので
一番最初に切り替わる前を共通とし、途中のブレイクポイントの記述は入れ、
最後のブレイクポイント以降をまた共通と考える
（自分の解釈なので分かりづらかったらすみません）
↧