2011/04/16

IE6-8 にも レスポンシブ・ウェブデザインを適用する「respond.js」

allWebクリエイター塾のスマートフォン講座では、レスポンシブ・ウェブデザインを徹底的に教え込みます。そのなかで、IE6-8 （IE6はすでに対象外かもしれません）へ Media Queries を適用する JSを紹介しています。それが、「respond.js」です。

Respond.js

「respond.js」は

非常に軽くて(最小化バージョン3kb /gzipバージョン 1kb)使いやすい JavaScript ライブラリです。作成したのは、jQuery UI や thmem roller などを作成した 「Scott Jehl」、最近人気が急上昇の開発者です。jQuery Mobile も大きく関わっています。

利用方法
利用方法は簡単で、「respond.js」を<head></head>内の CSSファイルの後に設置するだけです。

<head> 
 <meta charset="utf-8" /> 
 <title>Respond JS Test Page</title> 
 <link href="test.css" rel="stylesheet"/> 
 <link href="test2.css" media="screen and (min-width: 600px)" rel="stylesheet"/> 
 <script src="../respond.src.js"></script> 
</head>

デモ

Media Queries をサポートしているブラウザだと、respond.js がなくても Media Queries を理解してくれるので respond.js が動いているか分かりませんが、IE6-8 でアクセスしても ウィンドウサイズによって背景色が「黄色」から「青色」「赤色」「緑色」に変化するのがわかるでしょう。

非常に便利な JavaScript ライブラリですね。是非とも参考にしてみてくださいね。
投稿者 時刻:

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)