メディクエリとは、特定の環境やデバイスを判定するときに用いられるものです。最近、一般的に使われるのはサイトを閲覧しにきたメディアの環境、横幅で判定しPCかスマートフォンか判断する方法です。簡単な例は下記です。
|
1 2 3 |
@media (min-width: 768px){ /* 画面の横幅が768px以上のとき */ } |
様々なメディアクエリ
あまり知られてはいませんが、メディアクエリには他にも色々なものがあります。下記はその一例です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
@media (orientation: landscape) { /* スマートフォンが横向き */ } @media (orientation: portrait) { /* スマートフォンが縦向き */ } @media (scripting: enabled) { /* enabledの値で有効ならOKとなる */ } @media (hover: hover) { /* hoverが反応するか判断する */ } |
ピクセルの解像度を判断する
resolution特性を使うとデバイスの解像度を判定することができます。resolutionに指定できる単位は以下です。
- dpi：1インチあたりのドット数
- dppx：1ピクセルあたりのドット数
- dpcm：1センチメートルあたりのドット数
※ただし、dppxとdpcmは古いブラウザでは対応していないので要確認。
resolution特性など、細かく設定することでRetinaディスプレイか判断することも可能。
|
1 2 3 4 5 |
@media (-wibkit-min-device-pixel-ratio: 2) , (-o-min-device-pixel-ratio: 2/1) , (min-resolution: 192dpi) , (min-resolution: 2dppx) {etc.} |
関連リンク：メディア特性