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. jQuery Pit-scheduler v2.0
  2. FixedContent.js

    JavaScript

    モバイルフレンドリーなコンテンツ固定のjQueryプラグイン「FixedContent.js」

    FixedContent.jsはスクロールしてもコンテンツを固定してく…

  3. desoSlide

    JavaScript

    サムネイル付きのナビが素敵なスライダーを実装できるjQueryプラグイン「desoSlide」

    desoSlideというjQueryプラグインを使えば、サムネイル付き…

  4. jQuery fullsizable
  5. PgwSlider

    JavaScript

    レスポンシブで軽量なスライダーを実装できるjQueryプラグイン「PgwSlider」

    PgwSliderというjQueryプラグインを使えばレスポンシブで軽…

  6. Product Tour

    JavaScript

    レスポンシブなプロダクトツアーを実装できるCSS・jQuery「Product Tour」

    Product Tourはレスポンシブに対応したプロダクトツアーを実装…

コメント

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

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

最近の記事

  1. M360bt
  2. BQ-CASE/1

アーカイブ

PAGE TOP