当使用捆绑中的优化时，Chrome不会拾取CSS媒体查询

Question

正如我在标题中提到的那样 - Chrome没有选择媒体查询。例如：

@media only screen and (min-width: 481px) and (max-width: 784px)
@media (min-width: 481px) and (max-width: 784px)

如果我只留下一个宽度属性：

@media only screen and (min-width: 481px)

所有其他浏览器都可以选择。你们中有人也来了这个问题，可以帮助我步入正轨吗？

编辑

我正在使用Chrome的最新版本（版本32.0.1700.76 m）

Answer 1

在Chrome中有一个错误，它不会在没有正确的间距的情况下读取媒体查询。如果您查看捆绑的源代码（缩小时），您可能会注意到@media (min-width: 481px) and (max-width: 784px)已转换为@media (min-width: 481px)and (max-width: 784px)（请注意括号之后的缺失空间）。

本文很好地解释了问题，也是一个修复程序，基本上是创建实现IBundleTransform并实现Process的类，此时您可以检查此问题并解决此问题：

public class CssMinifyMQ : IBundleTransform {
    public void Process(BundleContext context, BundleResponse response) {
        response.ContentType = "text/css";
        response.Content = Regex.Replace(response.Content, "(\) and ( )?\()", ") and (");
    }
}
bundles.Add(
    new Bundle("~/CSS/Base", new CssMinifyMQ()).Include("~/Content/Base/*.css")
);

hth！