wake-up-neo.com

@media-Medienabfrage und ASP.NET MVC-Rasiermessersyntax-Konflikt

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 allgemeine Styling für die gesamte Site enthält. Gelegentlich habe ich jedoch seitenbezogene Stile, die im <head> Der Seite stehen - normalerweise sind dies ein oder zwei Zeilen.

Ich mag es nicht besonders, das CSS in <head> Zu setzen, da es keine strikte Trennung von Bedenken darstellt, aber für ein oder zwei Zeilen, die wirklich für diese Seite spezifisch sind, muss ich lieber keine weitere Datei anhängen und hinzufügen die Bandbreite.

Ich habe jedoch ein Problem, bei dem ich eine seitenbezogene Medienabfrage in den <head> Einfügen möchte, aber da eine Medienabfrage das @ -Symbol und die Klammern {} verwendet, stößt sie auf die Rasiermessersyntax:

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

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

Kann ich das umgehen?

195
Sniffer

verwenden Sie doppelte @@ Symbole. Dadurch wird @symbol ausgeblendet und @media auf der Clientseite korrekt dargestellt

426
archil

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

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

@@media ohne Leerzeichen hat bei mir nicht funktioniert.

22
A-Sharabiani

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>
}
4
Daut