@media media query i kolizja składni maszynki ASP.NET MVC

214

Mam dużą witrynę, która działa w ASP.NET MVC za pomocą silnika widoku Razor.

Mam podstawowy arkusz stylów, który zawiera wszystkie ogólne style dla całej witryny. Czasami jednak mam style specyficzne dla strony, które <head>na stronie - zwykle jest to jedna lub dwie linie.

Nie podoba mi się szczególnie umieszczanie CSS, <head>ponieważ nie jest to ściśle rozdzielone obawy, ale dla jednej lub dwóch linii, które są naprawdę specyficzne dla tej strony, wolę nie dołączać innego pliku i zwiększać przepustowość.

Mam jednak instancję, w której chciałbym umieścić zapytanie multimedialne specyficzne dla strony <head>, ale ponieważ zapytanie multimedialne używa symbolu @ i nawiasów {}, koliduje ze składnią maszynki do golenia:

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

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

Czy jest jakiś sposób na obejście tego?

css asp.net-mvc-3 razor media-queries Sniffer
źródło
3
Nadal uważam, że css stylespowinien znajdować się w pliku CSS, szczególnie w przypadku „Dużej witryny” Linearny css na stronie nie jest najlepszą praktyką. PS: Moja opinia
AlexC
Zgadzam się z @AlexC, ale dla tych, którzy są ciekawi prawidłowego przypadku użycia, krytyczne CSS ładuje się szybciej niż na zewnątrz. Jest to całkiem przydatna sztuczka dla stron, które polegają na super szybkiej pierwszej znaczącej farbie.
John Pavek
3
Innym przykładem użycia jest renderowanie wiadomości e
Jan Zahradník

Odpowiedzi:

477

użyj podwójnych symboli @@. To spowoduje ucieczkę symbolu @ i prawidłowe renderowanie @media po stronie klienta

archil
źródło
27

Pamiętaj również, aby dodać spację po podwójnym @@:

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

@@media bez miejsca nie działało dla mnie.

A-Sharabiani
źródło
2
Miał podobny problem do tego podczas korzystania ze skompresowanego CSS; Myślę, że @@ był otoczony tekstem, więc Razor z trudem go zinterpretował. Zdecydowałem się dodać miejsce przed @@. Dzięki za wskazówkę.
Anthony,
1
Nawet z przestrzenią nie działało to dla mnie. Odpowiedź Dauta z 2 różnymi styleelementami działała jednak!
CPHPython
7

Zdaję sobie sprawę, że to stare pytanie, ale to jedyne rozwiązanie, które zadziałało dla mnie:

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


    <style type="text/css" media="screen and (min-width:960px)">
    </style>
}
Daut
źródło