CSS media query によるスタイル切り替え

2009年07月02日
blog
css

CSS3 では media query に画面の幅などのプロパティを指定することにより、適用するスタイルシートを切り替えることができるらしい。
画面の幅のプロパティの場合、Firefox 3.5、Opera 9.64、Safari 4.0.1、Google Chrome 2.0.172.33 で動作することが確認できた。IE6,7,8 はダメ。

デモ：CSS media query によるスタイル切り替え

<style type="text/css" media="screen and (max-width: 500px)">
<!--
body {
    background-color: #fcc;
}
#note:after {
    content: "500";
}
-->
</style>
<style type="text/css" media="screen and (min-width: 500px) and (max-width: 1000px)">
<!--
body {
    background-color: #cfc;
}
#note:after {
    content: "500 ~ 1000";
}
-->
</style>
<style type="text/css" media="screen and (min-width: 1000px)">
<!--
body {
    background-color: #ccf;
}
#note:after {
    content: "1000";
}
-->
</style>

参考：another great CSS media query demo at hacks.mozilla.org
　　　CSSメモ: メディアクエリ
　　　Media Queries

«
»