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というのもあるみたいです。

関連記事

  1. Trunk.js

    JavaScript

    滑らかなスライド表示がいい!レスポンシブなナビゲーションメニュー「Trunk.js」

    Trunk.jsはレスポンシブに対応したナビゲーションメニューを実装す…

  2. no-image

    JavaScript

    ミニマリスティックでフレキシブルなjQueryスライダー「Bore Bones Slider」

    Bore Bones Sliderはミニマリスティックでフレキシブルな…

  3. jQuery Reel Plugin

    JavaScript

    上下左右の色んな角度から画像を回転させて見せることができる「jQuery Reel Plugin」

    これは面白いですね。画像を上下左右と色んな角度から回転させながら見るこ…

  4. Progressively

    JavaScript

    画像を徐々に読み込んでくれるJSライブラリ「Progressively」

    Progressivelyは画像を徐々に読み込ませることができるJSラ…

  5. JavaScript

    jQueryプラグイン・2014年上半期56選まとめ

    気づいたら2014年も上半期が終わってしまいましたね。そんなわけで、2…

  6. jQuery Slideout Menu

    JavaScript

    スライドしてメニュー表示できるjQueryプラグイン「jQuery Slideout Menu」

    jQuery Slideout Menuはメニューをスライドして表示さ…

コメント

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

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

最近の記事

  1. Happy Plugs AIR1
  2. cheero Stream 10000mAh
  3. BOSE HOME SPEAKER 300
  4. RP-PC112
  5. SRS-XB402M

アーカイブ

PAGE TOP