如何将媒体属性添加到 ASP.NET MVC4 样式包

Posted 2023-03-06

【中文标题】如何将媒体属性添加到 ASP.NET MVC4 样式包

【英文标题】：How to add media attribute to ASP.NET MVC4 style bundle

【发布时间】：2013-11-30 04:00:18

【问题描述】：

在 ASP.NET MVC4 应用程序中，样式包是使用

创建的

    bundles.Add(new StyleBundle("~/css/pos.css")
        .Include("~/css/mypos.css"));

并在视图中呈现为

@Styles.Render("~/css/pos.css")

在调试模式下生成的输出是

  <link href="/myapp/css/mypos.css" rel="stylesheet"/>

如何将媒体属性添加到输出，以便屏幕使用样式

  <link href="/myapp/css/mypos.css" media="screen" rel="stylesheet"/>

或用于打印

<link href="/myapp/css/mypos.css" media="print" rel="stylesheet"/>

或者有更好的方法，可以在 css 文件或其他解决方案中指定媒体吗？ 使用jquery和jquery-ui。

【问题讨论】：

一般不会发布外部链接，但是可以在这里找到相当完整的解决您的问题的方法danielcorreia.net/blog/quick-start-to-mvc4-bundling

这能解决问题吗？ ***.com/questions/12042248/…

是的，它看起来像解决方案。它需要添加额外的代码。这是不允许在调试模式下缩小的最佳解决方案吗？其他选项是将 @media 指令添加到 css 文件，但我的 css 文件已经包含 @media

【参考方案1】：

在您的 Razor 页面中，您将添加以下内容：

<link href="@Styles.Url("~/css/pos.css")" rel="stylesheet" type="text/css" media="print" />

【讨论】：

这在调试模式下也会缩小。如何仅在生产模式下缩小？来自***.com/questions/12042248/… 的代码和来自 Mike Beeler 答案的链接是否包含相同的仅代码解决方案？它使用#if DEBUG 来检测调试模式。

之前没注意过，还以为是发布模式呢。

我试过了，它也在调试模式下缩小了。我的评论中的 SO 答案中的 MS 程序经理评论证实了这一点。我评论中的链接中的长代码是否只是防止调试最小化的解决方案？打印 css 文件很长并且包含 @screen 指令（可能这是错误），因此使用 @media print 嵌入所有这些文件似乎是不可能的。

看起来很可惜，必须承认我过去使用的打印样式很短。我很想看看你是如何解决它的。我将其添加为收藏夹。

我将 Mikes 的答案标记为答案，因为它可能解决了问题。目前我也可以在调试中使用缩小样式，所以我正在使用你的答案。如果需要在浏览器调试器中检查样式，我会尝试 Mikes 解决方案。