在捆绑包中使用优化时，Chrome 不接收 CSS 媒体查询

Posted 2023-03-06

【中文标题】在捆绑包中使用优化时，Chrome 不接收 CSS 媒体查询

【英文标题】：Chrome is not picking up CSS media queries when using optimisations in bundles

【发布时间】：2014-02-18 13:15:21

【问题描述】：

正如我在标题中提到的 - 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）

【参考方案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！

【讨论】：

精彩的发现和回答！