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

214

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

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

我不特别喜欢将CSS放入其中，<head>因为它不是严格地将关注点分开，但是对于真正针对该页面的一两行而言，我宁愿不必附加另一个文件并增加带宽。

我有一个实例，但我想将特定于页面的媒体查询放入<head>，但是由于媒体查询使用@符号和方括号{}，因此与razor语法冲突：

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

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

有办法解决这个问题吗？

— 嗅探器
source

3

我仍然认为，css styles应该在CSS文件中，尤其是对于“大型站点”页面上的线性CSS不是最佳实践。PS：我的意见

— AlexC 2011年

我同意@AlexC，但是对于那些对有效用例感到好奇的人，关键的CSS内联加载比外部加载更快。对于那些依赖于超快速的第一个有意义的油漆的站点来说，这是一个非常方便的技巧。

— 约翰·帕维克

3

另一个用例是呈现电子邮件

— 扬Zahradnik的

477

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

— 阿奇尔
source

27

还记得在双@@之后添加一个空格：

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

@@media 没有空间对我不起作用。

— 萨拉比阿尼
source

2

使用压缩CSS时有与此类似的问题；我认为@@周围有文字，因此Razor难以解释。我选择在@@之前添加空格。谢谢你的提示。

— 安东尼

1

即使有空间，这对我也不起作用。Daut的答案包含2种不同的style元素，但确实起作用了！

— CPHPython

7

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

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


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

— 达特
source