IE8以下にもメディアクエリを適用させるには

IE8の利用者はいるんだろうか?と思うのだけど、職場の古いPCを使い続けている人は意外と多い。

できるなら 見せてあげよう レスポンシブ

ということで、respond.jsという便利なツール。
Media Queries非対応ブラウザでも、cssが適用されるように助けてくれる。作った人すごいね。

ただちょっとした条件とか注意が必要なので、自分への戒めにまとめ。
ここから引用→http://matome.naver.jp/odai/2138709610458531501

respon.jsの使い方
link要素以降で、読み込むだけでok

・HTML内のstyle要素は対象外
link要素かつrel属性がstylesheetに設定されたもののみ解析。

・CSSファイル内の@importは無効

・link要素にrel=”stylesheet”を記述すること
rel=”stylesheetである場合のみ作動するよう

・属性セレクタの記述をすると無効になる(2012年6月時点)

・ローカルでは動作しない
サーバーにアップするか、ローカルのサーバー環境(XAMPPなど)から確認する

・CSSファイルはHTMLと同一のサーバーに置く

・media属性はHTMLかCSSどちらかだけにする
link要素のmedia属性でのメディアクエリー指定もサポートしていますが、それによって読み込まれるCSS内にメディアクエリーが含まれていると、動作しないようです。どっちかにせえということのようで。

・BOM付きのUTF-8だとダメ

・リンク切れのCSSファイルがあるとダメ(らしい)

・@font-faceルールがあると動作が重くなる
@font-face ルールがメディアクエリーの中にあると動作が遅くなるので注意ということです