Question

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

我遇到过css3-mediaqueries.js

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

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

请你提供相同的例子。

Answer 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。以下是使用下层显示条件注释的示例：

<![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]-->

Answer 2

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

Answer 3

您只需要在页面中的任何位置包含脚本，库将完成剩下的工作。从项目主页引用：

用法：只在页面中包含脚本。

总是帮助阅读整个页面！

IE8中的媒体查询解决方法

3 个答案: