@media медиа-запрос и столкновение синтаксиса брандмауэра ASP.NET MVC

У меня есть большой сайт, который работает в 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>
}

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

Ответ 1

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

Ответ 2

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

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

@@media без пробела для меня не работало.