CSS 画面サイズによって処理を分岐 [php]

画面サイズによってCSS内で処理を分岐する方法を書きます。

レスポンシブWebデザイン

WEBサイトを作る時、PC、タブレット、スマートフォンなどあらゆる端末にWEBサイトを対応させる必要があります。そのような際、別々にサイトを作成すると作業が複雑になりますし、当然コストがかかります。そのような際に、cssで表示処理を分岐させる方法が有効です。

@media

cssの処理分岐には@mediaを使用します。

http://www.tohoho-web.com/css/rule/media.htm 

説明

@media により、スタイルシートを適用する条件を指定することができます。例えば、スマートフォンサイズの場合と、PCディスプレイサイズの場合で、適用するスタイルシートを変更することができます。

構文

@media ( condition ) [and ( condition )]... [, ...]
@media media_type [and ( condition )]... [, ...]

使用例

@media screen and (min-width: 1000px) {
   .topmenu {
            *zoom           : 1;
            list-style-type : none;
            width           : 1000px;
            margin          : 0px auto 10px;
            padding         : 0px;
   }
}

@media screen and (max-width: 999px) {
   .topmenu {
            *zoom           : 1;
            list-style-type : none;
            width           : 800x;
            margin          : 0px auto 10px;
            padding         : 0px;
   }
}

上記の例は画面サイズが1000px以上と未満で処理を分けています。
いくつかのブラウザで試してみましたが、動作しました。