@ media media query и синтаксическое столкновение бритвы ASP.NET MVC - PullRequest
Новая
       27

@ media media query и синтаксическое столкновение бритвы ASP.NET MVC

191 голосов
/ 11 августа 2011

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

Есть ли способ, которым я могу обойти это?

Ответы [ 3 ]

418 голосов
/ 11 августа 2011

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

19 голосов
/ 01 августа 2017

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

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

@@media без пробелов у меня не сработало.

4 голосов
/ 25 сентября 2018

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

@section cphPageHead{
    <style type="text/css" media="screen and (max-width:959px)">
    </style>


    <style type="text/css" media="screen and (min-width:960px)">
    </style>
}
...