1

我在 LESS 中使用了这个称为嵌套媒体查询的强大功能，它允许我将与每个“模块”相关的样式保存在一个地方。我的媒体查询在变量文件中定义如下：

// Breakpoints
@breakpoint-medium: "600px";
....

// Queries
@mq-medium-and-up:  ~"only screen and (min-width: @{breakpoint-medium})";
....

然后我可以通过以下方式在我的样式表中使用媒体查询：

.module {
  background: green;
  @media @mq-medium-and-up {
    background: yellow;
  }
}

我对我的 CSS 采用移动优先方法，从小屏幕（无媒体查询）到越来越大的断点（使用媒体查询）。显然，IE <= 8 中不支持媒体查询，所以我希望这些浏览器回退到具有“桌面样式”。

为此，我目前保留了一个单独的 less 文件 (IE.less)，我在其中重新定义了媒体查询，如下所示：

@mq-medium-and-up:  ~"all";
@mq-large-and-up: ~"all";

这会导致旧版本的 IE 可以理解的媒体规则

@media all ...

到目前为止一切都很好。我现在有一个单独的 IE 样式表，其中包含“桌面”样式。有问题的部分是当涉及到我应该如何包含这两个单独的样式表以防止较旧的 IE 版本请求两个样式表（它们基本相同）时。

目前我这样做：

<link rel="stylesheet" href="site.css" />
<!--[if (lt IE 9) & (!IEMobile)]>
<link rel="stylesheet" href="ie.css" />
<![endif]-->

是否可以阻止 IE < 9 下载 site.css，但仍使其对其他浏览器可见？我最初的想法是使用 NOT 操作符将 site.css 文件包装在另一个条件注释中，但是由于 IE10 已经放弃了对条件注释的支持，我想这是不可能的。

有任何想法吗？

4

1 回答 1

0

好的，这就是我最终得到的结果：

<!--[if (lte IE 8) & (!IEMobile)]>
<link rel="stylesheet" href="ie.css" />
<![endif]-->
<!--[if (IE 9)|(!IE)]><!-->
<link rel="stylesheet" href="site.css" />
<!--<![endif]-->

ie.css 针对旧版本的 Internet Explorer (<= IE8)。site.css 的目标是 IE9（它理解媒体查询）、非 ie 浏览器和不支持条件注释的浏览器 - 例如 IE10。"|(!IE)" 部分实际上不是必需的，但为了更加清晰而包含在内。它可能会抛弃一个或另一个版本的 IEMobile - 它需要一些测试。请注意，与第一个条件注释相比，第二个条件注释略有不同。这是使其中的内容对非 ie 浏览器可见的部分。

可以在此处找到对此类 cc 的进一步说明：http ://en.wikipedia.org/wiki/Conditional_comment#Downlevel-revealed_conditional_comment

于 2013-10-07T07:27:46.017 回答