場合ごとに異なるCSSファイルを読み込みたいときは
<head></head>内に
<link rel="stylesheet" media="screen and (max-width: 480px)" href="styleA.css" />
<link rel="stylesheet" media="screen and (min-width: 480px)" href="styleB.css" />
などと記述。
【結果】
ブラウザのウインドウサイズが横幅480px 以下 のときは syleA.css
ブラウザのウインドウサイズが横幅480px 以上 のときは syleB.css
に切り替わる。
◎ちなみに◎
「以上」と「以下」が混在してると「480pxぴったり」のときはどうなってるのか？
↓
HTMLで、上から順に読まれて下の記述のほうが優先されることを考えると、
「ブラウザのウインドウサイズが横幅480px 以上 のときは styleB.css』
が効いていると思われる。
つまり
480pxぴったりのときは styleB じゃないかな。
* * *
参考：http://kachibito.net/wordpress/media-queries-themes.html
最終更新：2011年11月14日 12:13
