読者です 読者をやめる 読者になる 読者になる

CSS3のメディアクエリ

CSS3のメディアクエリについてまとめておきます。

メディアクエリとは、ウィンドウサイズ、画面密度など閲覧環境の特性(メディア特性)に応じてCSSを分岐させることができる機能です。

 

メディアクエリの記述方法

記述方法には次のような3つの方法があります。

  • CSSファイル内
  • <head>内のlink要素のMedia属性
  • CSSファイル内の@import
 
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ピクセル単位のドット数