@media 媒体查询和 ASP.NET MVC 剃刀语法冲突答案

【问题标题】：@media media query and ASP.NET MVC razor syntax clash@media 媒体查询和 ASP.NET MVC 剃刀语法冲突
【发布时间】：2011-10-25 01:01:40
【问题描述】：

我有一个使用 Razor 视图引擎在 ASP.NET MVC 中运行的大型网站。

我有一个基本样式表，其中包含整个网站的所有通用样式。然而，有时我在页面的<head> 中有页面特定的样式——通常是一两行。

我不是特别喜欢将 CSS 放在 <head> 中，因为它不是严格分离关注点，但对于一两行，确实是特定于该页面的，我不想附加另一个文件并添加到带宽。

我有一个实例，虽然我想将特定于页面的媒体查询放入 <head>，但由于媒体查询使用 @ 符号和括号 {}，它与剃刀语法发生冲突：

@section cphPageHead{
     <style>
        /* PAGE SPECIFIC CSS */
        ...

        @media only screen and (max-width : 960px) <-- the @ symbol here is clashing!
            {
               ... }
            } 
    </style>
}

有没有办法解决这个问题？

【问题讨论】：

我仍然认为，css styles 应该在 CSS 文件中，特别是对于“大型网站”页面上的线性 css 不是最佳做法。 PS：我的看法
我同意@AlexC，但对于那些对有效用例感到好奇的人，关键的 CSS 内联加载比外部加载更快。对于那些依赖超快速的第一次有意义的绘画的网站来说，这是一个非常方便的技巧。
另一个用例是渲染电子邮件
对于使用 sonar double @ 之类的代码分析工具的人，可以通过工具将其标记为主要错误。如果您有机会更改或禁用规则，那没关系，否则您必须找到另一种方式来逃避@。
当使用带有网格的@media 时，您可能需要页面中的样式表，因为每个页面布局可能不同，您只想控制特定页面并将 css 打包到文件中是过度的工程，只是没有意义。在这种情况下，保持一起靠近的代码。因此，如果 css 绝对仅适用于单个页面，则最好在该页面中使用。否则总是在一个单独的 css 文件中

标签： css asp.net-mvc-3 razor media-queries

【解决方案1】：

使用双@@ 符号。这将转义@符号并在客户端正确呈现@media

【讨论】：

使用双 @@ 对我不起作用。我必须使用一个 @ 和 2 个不同的 style 元素！请在下面查看我的答案，并可能将其添加到此。
这对我有用。谢谢

【解决方案2】：

还要记得在双@@后面加一个空格：

 @@ media only screen and (max-width : 960px)

@@media 没有空间不适合我。

【讨论】：

在使用压缩 CSS 时遇到了类似的问题；我认为@@ 被文本包围，因此 Razor 难以解释它。我选择在@@ 之前添加空格。感谢您的提示。
即使有空间，这对我也不起作用。 Daut's answer 和 2 个不同的 style 元素确实有效！

【解决方案3】：

我意识到这是个老问题，但这是唯一对我有用的解决方案：

@section cphPageHead{
    <style type="text/css" media="screen and (max-width:959px)">
    </style>


    <style type="text/css" media="screen and (min-width:960px)">
    </style>
}

【讨论】：