CSS @media 媒体查询和 ASP.NET MVC razor 语法冲突
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7027469/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
@media media query and ASP.NET MVC razor syntax clash
提问by Sniffer
I've got a large site that runs in ASP.NET MVC using the Razor view engine.
我有一个使用 Razor 视图引擎在 ASP.NET MVC 中运行的大型站点。
I have a base stylesheet which contains all of the generic styling for the whole site. On occasion, however, I have page specific styles which in the <head>of the page - usually this is one or 2 lines.
我有一个基本样式表，其中包含整个站点的所有通用样式。然而，有时我会在页面中使用特定于页面的样式<head>——通常是一两行。
I don't particularly like putting the CSS in <head>as its not strictly separation of concerns, but for one or two lines, that really is specific to that page, I prefer not have to attach another file and add to the bandwidth.
我并不特别喜欢将 CSS 放入，<head>因为它不是严格的关注点分离，但是对于一两行，这确实是特定于该页面的，我不想附加另一个文件并增加带宽。
I've got an instance though where I would like to put a page specific media query into the <head>, but because a media query uses the @ symbol and brackets {} it's clashing with the razor syntax:
我已经得到了，虽然在这里我想提出一个页面特定媒体查询到的实例<head>，但由于媒体的查询使用@符号和括号{}这是剃刀语法冲突：
@section cphPageHead{
<style>
/* PAGE SPECIFIC CSS */
...
@media only screen and (max-width : 960px) <-- the @ symbol here is clashing!
{
... }
}
</style>
}
Is there a way I can get around this?
有没有办法解决这个问题？
回答by archil
use double @@ symbols. That will escape @ symbol and render @media correctly on client side
使用双@@ 符号。这将转义@符号并在客户端正确呈现@media
回答by A-Sharabiani
Also remember to add a space after double @@:
还要记得在双@@后加一个空格：
@@ media only screen and (max-width : 960px)
@@mediawith no space did not work for me.
@@media没有空间对我不起作用。
回答by Daut
I realize this is old question, but this is the only solution that worked for me:
我意识到这是一个老问题，但这是唯一对我有用的解决方案：
@section cphPageHead{
<style type="text/css" media="screen and (max-width:959px)">
</style>
<style type="text/css" media="screen and (min-width:960px)">
</style>
}
