@ Media-Medienabfrage und ASP.NET MVC-Rasierersyntax kollidieren

214

Ich habe eine große Site, die in ASP.NET MVC mit der Razor View Engine ausgeführt wird.

Ich habe ein Basis-Stylesheet, das das gesamte generische Styling für die gesamte Site enthält. Gelegentlich habe ich jedoch seitenspezifische Stile, die in <head>der Seite enthalten sind - normalerweise sind dies ein oder zwei Zeilen.

Ich mag es nicht besonders, das CSS einzufügen, <head>da es keine strikte Trennung von Bedenken darstellt, aber für ein oder zwei Zeilen, die wirklich spezifisch für diese Seite sind, möchte ich lieber keine weitere Datei anhängen und die Bandbreite erhöhen.

Ich habe zwar eine Instanz, in der ich eine seitenspezifische Medienabfrage in die einfügen möchte <head>, aber da eine Medienabfrage das @ -Symbol und die Klammern {} verwendet, kollidiert sie mit der Rasierersyntax:

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

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

Gibt es eine Möglichkeit, das zu umgehen?

css asp.net-mvc-3 razor media-queries Schnüffler
quelle
3
Ich denke immer noch, dass css stylesin der CSS-Datei sein sollte, insbesondere für eine "große Site". Lineares CSS auf der Seite ist nicht die beste Vorgehensweise. PS: Meine Meinung
AlexC
Ich stimme @AlexC zu, aber für diejenigen, die neugierig auf einen gültigen Anwendungsfall sind, wird kritisches CSS schneller inline geladen als extern. Es ist ein ziemlich praktischer Trick für Websites, die auf eine superschnelle erste aussagekräftige Farbe angewiesen sind.
John Pavek
3
Ein weiterer Anwendungsfall ist das Rendern von E-Mails
Jan Zahradník

Antworten:

477

Verwenden Sie doppelte @@ Symbole. Dadurch wird das @ -Symbol ausgeblendet und @media auf der Clientseite korrekt dargestellt

Archil
quelle
27

Denken Sie auch daran, nach double @@ ein Leerzeichen einzufügen:

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

@@media ohne platz hat bei mir nicht funktioniert.

A-Sharabiani
quelle
2
Hatte ein ähnliches Problem wie bei der Verwendung von komprimiertem CSS; Ich denke, das @@ war von Text umgeben und so bemühte sich Razor, ihn zu interpretieren. Ich habe mich dafür entschieden, das Leerzeichen vor dem @@ hinzuzufügen. Danke für den Tipp.
Anthony
1
Trotz des Platzes hat das bei mir nicht funktioniert. Dauts Antwort mit 2 verschiedenen styleElementen hat jedoch funktioniert!
CPHPython
7

Mir ist klar, dass dies eine alte Frage ist, aber dies ist die einzige Lösung, die für mich funktioniert hat:

@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
quelle