鴨のいいカモです

ここでアヒルの話題は出てきません。予めご了承下さい。

css3-mediaqueries.jsを使うなら@mediaで指定しよう

IE8以下のIEでMedia Queriesを使いたいときの方法として、css3-mediaqueries.jsがあるのだけど、ちょっとはまったのでメモ。

ちなみにcss3-mediaqueries.jsはここから入手。

css3-mediaqueries-js - css3-mediaqueries.js: make CSS3 Media Queries work in all browsers (JavaScript library) - Google Project Hosting

これ読み込んで、あとはlink要素使ってmedia指定すればOKかと思っていたのだけど、うまくいかない。

で、色々試したところ、どうやらlink要素で指定する方法はダメで、CSSの中で@mediaを使って指定してあげないといけないらしい。例えばこんな感じ。

@media screen and (max-width:640px) {
  スタイルを記述
}

ということで、HTMLのhead部分で場合分けして外部CSSを読み込むってのができないっぽい。

まあ、古いIEでMedia Queryを諦めるってのもアリだと思う。PCで使えなくてもさほど困らないし!