CSS Media QueryのIE8サポート

IE8は次のCSSメディアクエリをサポートしていません。

@import url("desktop.css") screen and (min-width: 768px);

そうでない場合、別の書き方は何ですか？Firefoxでも同じように機能します。

以下のコードに問題がありますか？

@import url("desktop.css") screen; 
@import url("ipad.css") only screen and (device-width:768px);

IE9より前のInternet Explorerバージョンは、メディアクエリをサポートしていません。

IE8ユーザーのデザインを低下させる方法を探している場合は、IEの条件付きコメントが役立つことがあります。これを使用して、以前のルールを上書きするIE 8/7/6固有のスタイルシートを指定できます。

例えば：

<link rel="stylesheet" type="text/css" media="all" href="style.css"/>
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="style-ie.css"/>
<![endif]-->

これはIE8のレスポンシブデザインを可能にしませんが、JSプラグインを使用するよりも簡単でアクセスしやすいソリューションになる可能性があります。

css3-mediaqueries-jsはおそらくあなたが探しているものです：このスクリプトはメディアクエリをエミュレートします。ただし（スクリプトのサイトから）、「@importedスタイルシートでは機能しません（パフォーマンス上の理由で使用しないでください）。また、<link>および<style>要素のメディア属性をリッスンしません」。

同じように、メディアクエリのみを有効にする、よりシンプルなRespond.jsがあります。min-widthmax-width

私が見つけた最良のソリューションは、レスポンシブデザインがIE8で機能することを主な関心事とする場合は特に、Respond.jsです。min / gzippedの場合は1kbとかなり軽量で、IE8クライアントのみがロードできることを確認できます。

<!--[if lt IE 9]>
<script src="respond.min.js"></script>
<![endif]-->

ブートストラップを使用している場合にも推奨される方法です。http：//getbootstrap.com/getting-started/#support-ie8-ie9

IE8（およびそれ以前のバージョン）および3.5より前のFirefoxは、メディアクエリをサポートしていません。Safari 3.2は部分的にサポートしています。

JavaScriptを使用してこれらのブラウザーにメディアクエリサポートを追加するいくつかの回避策があります。これらを試してください：

メディアクエリjQueryプラグイン（最大/最小幅のみを扱います）

css3-mediaqueries-js –サポートされていないブラウザにメディアクエリサポートを追加することを目的とするライブラリ

css3mediaqueries.jsプロジェクトページから取得。

注： @importされたスタイルシートでは機能しません（パフォーマンス上の理由で使用しないでください）。また<link>、<style>要素のメディア属性をリッスンしません。

css3-mediaqueries-jsを使用する簡単な方法は、本文の終了タグの前に以下を含めることです。

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

編集された回答：IEは画面と印刷をインポートメディアとして認識します。他のすべてのCSSがimportステートメントと共に提供されると、IE8はimportステートメントを無視します。サファリやモジラのようなGecoブラウザにはこの問題はありませんでした。

メディアクエリは、IE8以前ではまったくサポートされていません。

JavaScriptベースの回避策

IE8のサポートを追加するには、いくつかのJSソリューションの1つを使用できます。たとえば、Respondを追加して、次のコードでのみIE8のメディアクエリサポートを追加できます。

<!--[if lt IE 9]>
<script 
   src="respond.min.js">
</script>
<![endif]-->

CSS Mediaqueries は、同じことを行う別のライブラリです。そのライブラリをHTMLに追加するコードは同じです。

<!--[if lt IE 9]>
<script 
   src="css3-mediaqueries.js">
</script>
<![endif]-->

代替

JSベースのソリューションが気に入らない場合は、IE <9固有のスタイルを調整するIE <9のみのスタイルシートを追加することも検討してください。そのためには、次のHTMLをコードに追加する必要があります。

<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="style-ielt9.css"/>
<![endif]-->

注意 ：

技術的には、もう1つの選択肢です。CSSハックを使用するを使用してIE <9をターゲットにします。IE <9のみのスタイルシートと同じ影響がありますが、そのための個別のスタイルシートは必要ありません。ただし、このオプションは無効なCSSコードを生成するため、このオプションはお勧めしません（これは、CSSハックの使用が今日一般的に嫌われているいくつかの理由の1つです）。

Internet Explorer 8以前は、メディアクエリはサポートされていませんでした。ただし、状況に応じて、条件付きコメントを使用してInternet Explorer 8以下のみをターゲットにすることができます。適切なCSSファイルアーキテクチャを使用する必要があります。

http://blog.keithclark.co.uk/wp-content/uploads/2012/11/ie-media-block-tests.php

@media \0screen {}REAL IE8で使用したところ、問題なく動作しました。

IEは、IE9までメディアクエリサポートを追加しませんでした。つまり、IE8では運が悪かったのです。