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)（注意括号后面缺少的空格）。

This article很好地解释了这个问题，也是一个基本上用于创建实现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！

在捆绑包中使用优化时，Chrome无法获取CSS媒体查询

1 个答案: