@media media query and ASP.NET MVC razor syntax clash
I've got a large site that runs in ASP.NET MVC using the Razor view engine.
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.
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.
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:
@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?
use double @@ symbols. That will escape @ symbol and render @media correctly on client side
Also remember to add a space after double @@:
@@ media only screen and (max-width : 960px)
@@media with no space did not work for me.
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>
}
加载中,请稍侯......
精彩评论