css3-mediaqueries-js

JavaScript

Media QueriesをIE8以下でも使えるようにするための「css3-mediaqueries-js」

前回、Media Queriesの@mediaを使用したCSSをまとめてみたんですが、IE8以下ではMedia Queriesが対応していないので使用することができません。なので、IE8以下でもMedia Queriesが使えるようにするJS「css3-mediaqueries-js」を使ってみました。

[ads_center]

使い方

使い方はとても簡単です。head内に以下を記述するだけです。

<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

上記の「<!–[if lt IE 9]>」と「<![endif]–>」はIEの独自仕様でIE9未満だけの場合にのみ読み込ませることができます。

ということで、これでIE8以下でもMedia Queriesが使えるようになります。ちなみに、IETesterでローカルにあるファイルを確認してみたところ、なぜかうまくいかなかったんですが、実際のサーバにアップして表示確認(IETesterで)してみたところ、ちゃんとIE8以下(IE8、IE7)でも効いていました。

レスポンシブデザインでの制作で、IE8以下も視野に入れたい場合はこれを使えばよさそうですね。

また、この他にもRespond.jsというのもあるみたいです。

Media Queriesの@mediaMedia Queriesの@mediaを使ってブラウザ幅やデバイス幅に応じたCSSを記述してみる前のページ

Chromeでサイト全体のスクリーンショットなども撮って編集もできる拡張機能「Screen Capture (by Google)」次のページScreen Capture (by Google)

関連記事

  1. JavaScript

    レスポンシブに対応している軽量のjQueryスライダー「Unslider」

    とても軽量でレスポンシブにも対応しているjQueryスライダー「Uns…

  2. JavaScript

    指定した画像を遅らせてローディングさせるjQueryプラグイン「Lazy Karl」の使い方

    ちょっと面白そうだったので試してみました。画像を表示させるまでの間にロ…

  3. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryで$.inArrayを使えば配列の中に指定した値が何番目に入ってるか知ることができる

    jQueryで配列の中に自分が指定した値が何番目にあるか知りたい場合は…

  4. Salvattore
  5. Slickhover.js

    JavaScript

    滑らかでスムーズなホバーエフェクトを実装できるjQueryプラグイン「Slickhover.js」

    とても軽量で使いやすいのがいいですね。ホバー時に滑らかでスムーズなエフ…

  6. VintageTxt

    JavaScript

    タイピングしているような効果を実装できるjQueryプラグイン「VintageTxt」

    VintageTxtというjQueryプラグインを使えば、文字をタイピ…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. Anker PowerWave Pad Alloy
  2. Anker Bolder LC30
  3. BG-R10

アーカイブ

PAGE TOP