CSS3のメディアクエリ
CSS3のメディアクエリについてまとめておきます。
メディアクエリとは、ウィンドウサイズ、画面密度など閲覧環境の特性(メディア特性)に応じてCSSを分岐させることができる機能です。
メディアクエリの記述方法
記述方法には次のような3つの方法があります。
1．CSSファイル内に記述する場合
@media screen and (メディア特性){
スタイルを記述
}
2．<head>要素に記述する場合
<link rel="stylesheet" media="screen and (メディア特性)" href="ファイル名.css">
3．@importに記述する場合
@import url("ファイル名.css") screen and (メディア特性);
メディア特性
特性 条件 最大/最小 値
width view port(ブラウザ画面)の横幅 max-/min- 数値
height view port(ブラウザ画面)の高さ max-/min- 数値
device-width モニタ画面の横幅 max-/min- 数値
orientation view portの向き なし portrait/landscape
縦長(portrait)または横長(landscape)
aspect-ratio view port(ブラウザ画面)の縦横比 max-/min- 縦横比
横/縦（1/1など）という形で指定
device-aspect-ratio モニタ画面の縦横比 max-/min- 縦横比
横/縦（16/9など）という形で指定
device-pixel-ratio 画面のピクセル密度(density)の値 max-/min- 1,1.5,2などの値
(*1)
resolution(*2) 画面のピクセル密度の値 max-/min- dpi,dpcm,dppx
scan プログレッシブかインターレス - progressive/interlace
grid グリッドの幅 - 1/0
(*1)device-pixel-ratio
W3C仕様には定義されていないためベンダープレフィックス(-webkit-)が必要です。
(*2) resolution
W3C仕様に定義されていますが、まだサポート環境が少ないので-webkit-device-pixel-ratioとの併記が推奨されています。
dpi：1インチあたりのドット数
dpcm：1センチあたりのドット数
dppx：1ピクセル単位のドット数
