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 ルールがメディアクエリーの中にあると動作が遅くなるので注意ということです