【Javascript】IE8以下にもレスポンシブ対応させることができるスクリプト「respond.js」
- ライター：鹿
こんばんは！今日はバレンタインデーでした。毎年バレンタイン終了のお知らせを出しているのに世の中はバレンタイン一色で泣きたくなりますね！
そんな話は置いといて、以前当ブログをリニューアルしてレスポンシブデザインでコーディングしたのですが、メディアクエリーがIE8以下に非対応ということもあり古いIEには固定幅レイアウトにしていました。
今回は実装が簡単で軽量だと言われているrespond.jsを使用してIE8以下にもレスポンシブデザインを試験的に実装してみました。
広告を表示できません。
実装方法
respond.jsからjavascriptライブラリをダウンロードします。
GitHubからのダウンロード方法が分からなかったのでわざわざググりました。ここの記事が分かりやすかったです。
ファイルをダウンロードしたら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」デモ
即席で作ったのでレイアウトとかすごく雑ですが、動きだけ参考になればと思います…。
注意点
- ローカル環境では動作しないようです。サーバーにアップロードして確認してください。
- CSSファイルを読み込む際は「rel=”stylesheet”」を忘れずに記述して下さい。
- メディアクエリはlinkタグの中、CSSの中のどちらか一方に記述して下さい。
- @importで読み込まれたCSSには非対応です。
参考サイト
-
広告を表示できません。