@media media query and ASP.NET MVC razor синтаксис столкновение

у меня есть большой сайт, который работает в ASP.NET MVC с помощью Razor view engine.

у меня есть базовая таблица стилей, которая содержит все общие стили для всего сайта. Иногда, однако, у меня есть страницы конкретных стилей, которые в <head> страницы - обычно это одна или 2 линии.

мне не особенно нравится ставить CSS в <head> поскольку это не строго разделение проблем, но для одной или двух строк, которые действительно специфичны для этой страницы, я предпочитаю не нужно прикреплять еще один файл и добавлять к полосе пропускания.

у меня есть экземпляр, хотя где я хотел бы поместить страницу конкретного медиа-запроса в <head>, но поскольку медиа-запрос использует символ @ и скобки {}, он сталкивается с синтаксисом razor:

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

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

есть ли способ обойти это?

3 169
css asp.net-mvc-3 razor media-queries

3 ответа:

использовать двойные @@ символы. Это позволит избежать @ symbol и правильно отобразить @media на стороне клиента

373

также не забудьте добавить пробел после double @@:

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

@@media без пробела у меня не получилось.

15

Я понимаю, что это старый вопрос, но это единственное решение, которое работает для меня:

@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