在捆绑包中使用优化时,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!