媒体查询和 IE8

**** IE8 及以下版本根本不支持媒体查询

基于 Javascript 的解决方法

要添加对 IE8 的支持,你可以使用多种 JS 解决方案之一。例如,可以添加 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]-->

注意 :

从技术上讲,这是另一种选择:使用 CSS 黑客攻击 IE <9。它与 IE <9 唯一样式表具有相同的影响,但你不需要单独的样式表。但是,我不推荐这个选项,因为它们会产生无效的 CSS 代码(这只是为什么 CSS hacks 的使用今天通常不赞成的几个原因之一)。