CSS メディア クエリを Internet Explorer 8 で動作させるにはどうすればよいですか?

CSS メディア クエリと IE8 の互換性

Internet Explorer 8 (IE8) では、特定の CSS メディア クエリ、特にimport ステートメント。

サポートされていませんクエリ:

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

代替記述方法:

IE8 をサポートするには、インポート ステートメントを 2 行に分ける必要があります:

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

コード懸念事項:

提供されたコード スニペット内:

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

IE8 では、最初のインポート ステートメントは 2 番目のインポート ステートメントを上書きします。これを回避するには、インポートを再編成する必要があります:

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

解決策:

互換性を高めるために、css3-mediaqueries-js や Respond などのポリフィルの使用を検討してください。 js は、IE8 などの古いブラウザでのメディア クエリのサポートを提供します。

以上がCSS メディア クエリを Internet Explorer 8 で動作させるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。