使用较少嵌套媒体查询的Mobile first方法-寻找条件注释的IE10替代方案
我在LESS中使用了这个名为nested media queries的伟大功能，它允许我将与每个“模块”相关的样式保存在一个地方。我的媒体查询在变量文件中定义如下：
// 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已经放弃了对条件注释的支持，我想这是不可能的。
有什么想法吗？
回答 1
Stack Overflow用户
发布于 2013-10-07 15:27:46
好的，这就是我的结论：
<!--[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针对的是旧版本的IE8 (<= IE8)。site.css针对的是IE9 (支持媒体查询)、非ie浏览器和不支持条件注释的浏览器--比如IE10。"|(!IE)“部分实际上并不是必需的，但为了更清晰起见包含了”|(！IE)“。它可能会抛出一个或另一个版本的IEMobile -它需要一些测试。请注意，与第一个条件注释相比，第二个条件注释略有不同。这是使其中的内容对非ie浏览器可见的部分。
关于这类cc的更多解释可以在这里找到：http://en.wikipedia.org/wiki/Conditional_comment#Downlevel-revealed_conditional_comment
https://stackoverflow.com/questions/18781077
复制相似问题
腾讯云开发者
