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

小编典典

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

css

我有一个使用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>
}

有办法解决这个问题吗？

阅读 843

2020-05-16

共1个答案

小编典典

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

2020-05-16