IE8 中的媒体查询解决方法答案

【问题标题】：Media query workaround in IE8IE8 中的媒体查询解决方法
【发布时间】：2011-10-15 01:42:27
【问题描述】：

我希望在我的代码中为 ie8 添加 CSS 媒体查询解决方法..

我遇到了 css3-mediaqueries.js

http://code.google.com/p/css3-mediaqueries-js/

但无法在我的网站上找到有关如何实施它的详细信息或示例。

您能否提供任何相同的示例。

【问题讨论】：

标签： html css media-queries

【解决方案1】：

在网站上显示“用法：只需将脚本包含在您的页面中即可。”并有更多关于如何使用的规则。它似乎只适用于样式表内的媒体查询，而不适用于媒体查询属性，并且不适用于@imported CSS 文件。

更新

根据我们的对话，我们的目标是为台式机提供一个样式表，为平板电脑提供另一个样式表。自然的解决方案是执行以下操作：

<link media="screen and (max-width: x)" href="tablet.css">
<link media="screen and (min-width: x)" href="desktop.css">

问题在于 IE6、7 和 8 将同时应用这两种样式表。幸运的是，我们知道 IE6、7 和 8 永远不会出现在平板电脑上（或者至少不是现代意义上的平板电脑），所以我们可以使用Internet Explorer Conditional Comments 来防止这些版本的 IE 看到平板电脑 CSS。下面是一个使用下层显示条件 cmets 的示例：

<![if gte IE 9]>
    <!-- This code is visible to IE9 and above and all non-IE browsers. -->
    <link media="screen and (max-width: x)" href="tablet.css">
<![endif]>
<link media="screen and (min-width: x)" href="desktop.css">

对于任何非 IE 浏览器，<![if gte IE 9]> 是一个被忽略的无意义标签。对于 IE 浏览器，他们会进行逻辑检查：if(version >= 9) use content。 IE 6、7 和 8 将因此忽略平板 css 并且只看到<link href="desktop.css">。您也可以使用更详细的：

<![if gte IE 9]>
    <!-- This code is visible to IE9 and above and all non-IE browsers. -->
    <link media="screen and (max-width: x)" href="tablet.css">
    <link media="screen and (min-width: x)" href="desktop.css">
<![endif]>
<!--[if lt IE 9]>
    <!-- This code is only visible to IE8 and below. -->
    <link href="desktop.css">
<![endif]-->

【讨论】：

嗯..所以这是否意味着如果我想使用那不起作用？除了 Respond.js 还有其他更简单的选择吗？
对，您需要在 CSS 本身中进行媒体查询：@media all {...}
所以在 CSS 中，它是否完全支持媒体查询...就像我写 @media min-width:....实际上我想避免这样做以便于两者之间的维护单独的 CSS ..
这就是它看起来要做的事情。你能举出更多关于你想要做什么的例子吗？如果您只是在进行最小宽度测试，您是否正在尝试拥有移动版和普通版网站？如果是这样，您可以假设旧的 IE 总是获得普通版本并使用 IE 条件 cmets 使其工作。
我希望为不同的屏幕尺寸应用 2 个不同的 CSS 文件（截至目前使用最小宽度、最大宽度和不完全是设备宽度）...我认为条件 cmets 会很好，但我认为我们不能在那里指定宽度属性..

【解决方案2】：

Skeleton 是一个很棒的库，用于使用媒体查询创建网站，skeleton site 本身就是一个巨大的例子。

【讨论】：

非常感谢..但 Skeleton 似乎是一个成熟的框架..我只关注旧浏览器中的 css 媒体查询支持..我自己实现响应式设计...

【解决方案3】：

您只需将脚本包含在页面中的任何位置，剩下的交给库即可。引用自项目主页：

用法：只需将脚本包含在您的页面中即可。

总是有助于阅读整个页面！

【讨论】：

其实我想使用带有 2 个的媒体查询
啊，是的，库不支持这个