viewportとメディアクエリーをもう一度理解する

レスポンシブウェブデザインを実現する上で欠かせないviewportとメディアクエリの関係について、
きちんと理解しておくためにメモ。

まずはそもそも、

iPhoneなどのスマートフォン、タブレットの主要機種にはPCでの閲覧を目的として作られたサイトが、
それらの小さなデバイスの画面にもきちんと収まるようデフォルトで幅※980pxで表示する仕組みが備わっている。
 
※実機の大きさではなく980pxを模した画面幅

 

例 : PC用の画面レイアウト

 

上記のレイアウトをスマホで閲覧すると、、、


 

スマホ内で擬似的な画面幅980pxの表示が展開されている(実機の画面幅ではない)

 

viewportを設定する

擬似的な980pxの画面幅を上書きして、閲覧しているデバイスの物理的な画面幅(本当の大きさ)を取得する。

(viewportのmetaタグはhtmlファイルのheadタグ内に記述する)
 

メディアクエリを記述する

cssスタイルシート(もしくはhtmlのstyleタグ)にメディアクエリのコードを記述する。

閲覧しているデバイスの幅からメディアクエリで振り分けられたどのスタイルが適用されるかが決まる。

 

スマホ用のレイアウト(小さい画面幅用)が正しく適用された。
 

 

 

※メディアクエリの記述が無い場合、PC用のレイアウトはスマホの画面幅からはみ出して表示される。
 

– まとめ –

メディアクエリでスマホなど小型デバイス用のレイアウトを作り込んでいても、
viewportの設定をきちんと記述していなければ画面幅別のスタイルが正しく適用されない。

メディアクエリとviewportはセットで記述する。

Follow me!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください