CSSviewportとメディアクエリーをもう一度理解するレスポンシブウェブデザインを実現する上で欠かせないviewportとメディアクエリの関係について、きちんと理解しておくためにメモ。そもそも、iPhoneなどのスマートフォン、タブレットの主要機種にはPCでの閲覧を目的として作られたサイトが、それらの小さなデバイスの画面にもきちんと収まるようデフォルトで幅※980pxで表示する仕組みが備わっている。PC用の画面レイアウト上記のレイアウトをスマホで閲覧すると、、、スマホ内で擬似的な画面幅980pxの表示が展開されている(実機の画面幅ではない)viewportを設定する擬似的な980pxの画面幅を上書きして、閲覧しているデバイスの物理的な画面幅(本当の大きさ)を取得する。initial-scale=1.0">(viewportのmetaタグはhtmlファイルのheadタグ内に記述する)メディアクエリを記述するcssスタイルシート(もしくはhtmlのstyleタグ)にメディアクエリのコードを記述する。閲覧しているデバイスの幅からメディアクエリで振り分けられたどのスタイルが適用されるかが決まる。{/*画面幅660px以下のときに適用されるスタイル*/}スマホ用のレイアウト(小さい画面幅用)が正しく適用された。※メディアクエリの記述が無い場合、PC用のレイアウトはスマホの画面幅からはみ出して表示される。–メディアクエリでスマホなど小型デバイス用のレイアウトを作り込んでいても、viewportの設定をきちんと記述していなければ画面幅別のスタイルが正しく適用されない。メディアクエリとviewportはセットで記述する。