首页 文章

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

提问于
浏览 次
178

我有一个使用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 asp.net-mvc-3 razor media-queries

3 回答

  • 390

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

    回复于
  • 17

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

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

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

    回复于
  • 1

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

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


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

相关问题