@media media query and ASP.NET MVC razor syntax cl

2019-01-13 05:09发布

站内问答 / HTML/CSS
626 3 5

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?

3条回答
闹够了就滚
2楼-- · 2019-01-13 05:24

use double @@ symbols. That will escape @ symbol and render @media correctly on client side

查看更多
0人赞 添加讨论(0) 举报
The star\"
3楼-- · 2019-01-13 05:36

Also remember to add a space after double @@:

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

@@media with no space did not work for me.

查看更多
0人赞 添加讨论(0) 举报
霸刀☆藐视天下
4楼-- · 2019-01-13 05:44

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>
}
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)