【Javascript】IE8以下にもレスポンシブ対応させることができるスクリプト「respond.js」

こんばんは！今日はバレンタインデーでした。毎年バレンタイン終了のお知らせを出しているのに世の中はバレンタイン一色で泣きたくなりますね！

そんな話は置いといて、以前当ブログをリニューアルしてレスポンシブデザインでコーディングしたのですが、メディアクエリーがIE8以下に非対応ということもあり古いIEには固定幅レイアウトにしていました。

今回は実装が簡単で軽量だと言われているrespond.jsを使用してIE8以下にもレスポンシブデザインを試験的に実装してみました。

実装方法

respond.jsからjavascriptライブラリをダウンロードします。

GitHubからのダウンロード方法が分からなかったのでわざわざググりました。ここの記事が分かりやすかったです。

GitHub, Bitbucket でのファイルのダウンロード方法 | プログラマーズ雑記帳

ファイルをダウンロードしたらHEAD内のCSSよりも下に読み込むコードを記述して完了です。

[html highlights=”7,8,9,10″]
<!– StyleSheet –>
<link rel="stylesheet" href="/css/reset.css">
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/tablet.css" media="screen and (min-width: 481px) and (max-width: 800px)" >
<link rel="stylesheet" href="/css/smartphone.css" media="screen and (max-width: 480px)" >

<!–[if lt IE 9]>
<script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="/js/respond.js"></script>
<![endif]–>

cssファイルはcssというフォルダを作ってその中にまとめて入れています。html5.jsはgoogleでホスティングされているものを使用し、respond.jsはjsというフォルダを作って格納しています。
IE9以上はHTML5やCSSに対応しているので、条件付きコメントでhtml5.jsやrespond.jsを読み込ませないようにしています。
これで実装が出来ました！

IE8スクリーンショット

PCレイアウト

タブレットレイアウト

スマートフォンレイアウト

どのレイアウトも問題なく可変対応します。
ただしCSS3が未対応だったり、関連記事の数字アイコンが後ろに潜り込んでいたり、adsenseのバナーがおかしくなっていたりとまだまだ調整段階です。

ちなみにIE7では:beforeや:afterに対応していないため、アイコンフォントが表示されなかったりレイアウトが多少崩れたりします。IE6？知らない子ですね。

「respond.js」デモ

• Demo
• zipファイルをDownload

即席で作ったのでレイアウトとかすごく雑ですが、動きだけ参考になればと思います…。

注意点

• ローカル環境では動作しないようです。サーバーにアップロードして確認してください。
• CSSファイルを読み込む際は「rel=”stylesheet”」を忘れずに記述して下さい。
• メディアクエリはlinkタグの中、CSSの中のどちらか一方に記述して下さい。
• @importで読み込まれたCSSには非対応です。

参考サイト

IE8以下でもメディアクエリーに対応する Respond.js の紹介と動かない時の対処法 | notnil creation weblog