メディアクエリ(@media)

メディクエリとは、特定の環境やデバイスを判定するときに用いられるものです。最近、一般的に使われるのはサイトを閲覧しにきたメディアの環境、横幅で判定しPCかスマートフォンか判断する方法です。簡単な例は下記です。

@media (min-width: 768px){
/* 画面の横幅が768px以上のとき */
}

様々なメディアクエリ

あまり知られてはいませんが、メディアクエリには他にも色々なものがあります。下記はその一例です。

@media (orientation: landscape) {
/* スマートフォンが横向き */
}

@media (orientation: portrait) {
/* スマートフォンが縦向き */
}

@media (scripting: enabled) {
/* enabledの値で有効ならOKとなる */
}

@media (hover: hover) {
/* hoverが反応するか判断する */
}

ピクセルの解像度を判断する

resolution特性を使うとデバイスの解像度を判定することができます。resolutionに指定できる単位は以下です。

※ただし、dppxとdpcmは古いブラウザでは対応していないので要確認。

resolution特性など、細かく設定することでRetinaディスプレイか判断することも可能。

@media
(-wibkit-min-device-pixel-ratio: 2) ,
(-o-min-device-pixel-ratio: 2/1) ,
(min-resolution: 192dpi) ,
(min-resolution: 2dppx) {etc.}

関連記事