メディアクエリ - Kazzz's diary

WebアプリケーションにおけるCSS(カスケイディングスタイルシート)はスタイル、レイアウト、アピアランスを宣言することにより、同一のHTMLから様々なコンテンツを生成する役割を担っている。

そもそもCSSにより様々な属性を記述するのを一箇所に集約するのは、いわゆるDRYの原則に従うためなのだが、モバイル機器とPCで同一のスタイルシートを使用するのは前回紹介したmetaタグのようにデバイスに合わせて振る舞いを変えるタグを以てしても困難だと思われる。

そこでPCとモバイル機器によってスタイルシートの属性を変えたり、そもそも別なスタイルシートを適用することが次善の作となるのだが、そのスタイルの切り替えに使用されるのがメディア・クエリ(media quries)である。

このメディアクエリ、どのように使うかだが、典型的なのは例えば以下のようにデバイス(媒体)のスクリーンサイズ(幅、高さ)を問い合わせ(メディア・クエリ)てその結果でスタイルを適用するケースである。

例えば、媒体のスクリーン幅(width)が480に満たない場合にのみ、特定のスタイルを適用するには以下のようにスタイルシートを宣言する。

@media screen and (max-width: 480px) {
    body, table td, select {
    background: aqua;
  }
}

一方Android エミュレータのAVDの画面解像度をHVGAにしてWebブラウザ上で表示したのが以下の結果だ。

(ポートレイトにしているためGWTのGridのカラムがシュリンクされてレイアウトが崩れてしまっているが。)

AndroidのWebkitではメディアクエリは失敗すると、以前どこかで聞いたような気がするのだがこのような単純なケースでは期待通りの動作となるようだ。