CSS 画面サイズによって処理を分岐 [php]
画面サイズによってCSS内で処理を分岐する方法を書きます。
http://www.tohoho-web.com/css/rule/media.htm
@media media_type [and ( condition )]... [, ...]
いくつかのブラウザで試してみましたが、動作しました。
レスポンシブ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以上と未満で処理を分けています。
いくつかのブラウザで試してみましたが、動作しました。
コメント
コメントを投稿