@media媒体查询和ASP。NET MVC razor语法冲突

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

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

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

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

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


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

有什么办法能让我避开吗?

110589 次浏览

小开

最佳答案

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

小开

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

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

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

小开

我知道这是一个老问题，但这是唯一对我有效的解决方案:

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




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