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

214

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

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

css asp.net-mvc-3 razor media-queries Sniffer
источник
3
Я все еще думаю, что, css stylesдолжен быть в файле CSS, особенно для «Большой сайт» Линейный CSS на странице не является лучшей практикой. PS: Мое мнение
AlexC
Я согласен с @AlexC, но для тех, кому интересно правильное использование, критический CSS загружается быстрее, чем снаружи. Это довольно удобный трюк для тех сайтов, которые полагаются на супер быструю первую значимую краску.
Джон Павек
3
Другой вариант использования - рендеринг электронных писем
Ян Захрадник,

Ответы:

477

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

леканора
источник
27

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

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

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

A-Sharabiani
источник
2
Подобная проблема возникала при использовании сжатого CSS; Я думаю, что @@ был окружен текстом, и поэтому Бритва изо всех сил пыталась его интерпретировать. Я решил добавить пробел перед @@. Спасибо за чаевые.
Энтони
1
Даже с пространством, это не сработало для меня. Ответ Даута с двумя различными styleэлементами сработал!
CPHPython
7

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

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


    <style type="text/css" media="screen and (min-width:960px)">
    </style>
}
Даут
источник