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. no-image

    JavaScript

    多彩なコンテンツ表示やカスタマイズ性を有する「LC Lightbox」

    LC Lightboxは画像や動画など多彩なコンテンツ表示ができたり高…

  2. AOS

    JavaScript

    スクロールに合わせていろんなアニメーションで表示できる「AOS」

    AOSはスクロールに合わせてフェードやフリップ、ズームなどのアニメーシ…

  3. JavaScript

    ページ内のリンクをスムーズに移動できるsmoothScroll.jsを使ってみた

    ページ内のリンクをスムーズに移動してくれる「smoothScroll.…

  4. DarkTooltip

    JavaScript

    色んなパターンのツールチップを実装できるjQueryプラグイン「DarkTooltip」

    DarkTooltipというjQueryプラグインを使えば、色んなパタ…

  5. Text Effects

    JavaScript

    テキストがカシャカシャ切り替わって表示するjQueryプラグイン「Text Effects」

    Text EffectsというjQueryプラグインを使えば、テキスト…

  6. JavaScript

    画像にマウスオーバーするとズームして綺麗にエフェクトがかかるjQueryプラグイン「Swish」

    画像にマウスオーバーをするとズームして綺麗なオーバーレイのエフェクトが…

コメント

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

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

最近の記事

  1. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP