Question

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

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

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

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

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

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

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

Answer 1

使用double @@符号。这将逃脱@符号并在客户端正确呈现@media

Answer 2

还记得在双倍@@：

之后添加一个空格

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

没有空格的

@@media对我不起作用。

Answer 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>
}

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

3 个答案: