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. Inspiration for Letter Effects

    JavaScript

    印象的なテキストエフェクトを実装する「Inspiration for Letter Effects」…

    anime.jsを活用した、印象的でとってもかっこいいテキストエフェク…

  2. SimpleAccordion

    JavaScript

    シンプルなアコーディオンを実装できるjQueryプラグイン「SimpleAccordion」

    SimpleAccordionは、シンプルなアコーディオンを実装するこ…

  3. Turntable.js

    JavaScript

    画像を使ってストップモーション動画のような効果を実装できる「Turntable.js」

    Turntable.jsは複数の画像を使ってストップモーション動画のよ…

  4. swingdrag

    JavaScript

    jQuery UIのドラッグ機能にスイング効果を加えることができる「swingdrag」

    swingdragは、jQuery UIのドラッグ機能にスイング効果を…

  5. no-image

    JavaScript

    タッチ対応のドロワーコンポーネント「hy-drawer」

    hy-drawerはタッチに対応したドロワーコンポーネントです。And…

  6. Guardian

    JavaScript

    フォームにバリデーションを実装できるjQueryプラグイン「Guardian」

    Guardianはフォームにバリデーション機能を実装することができるj…

コメント

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

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

最近の記事

  1. TR153
  2. cheero Flat 10000mAh with Power Delivery 18W CHE-112
  3. SV-S251
  4. スラウェシ トラジャ

アーカイブ

PAGE TOP