@media media query e ASP.NET MVC scontro sintassi rasoio

214

Ho un sito di grandi dimensioni che funziona in ASP.NET MVC utilizzando il motore di visualizzazione Razor.

Ho un foglio di stile di base che contiene tutto lo stile generico per l'intero sito. A volte, tuttavia, ho stili specifici della pagina che nella parte <head>della pagina - di solito si tratta di una o 2 righe.

Non mi piace particolarmente inserire il CSS in <head>quanto non strettamente separazione delle preoccupazioni, ma per una o due righe, che è davvero specifica per quella pagina, preferisco non dover allegare un altro file e aggiungere alla larghezza di banda.

Ho un'istanza, però, in cui vorrei inserire una query media specifica della pagina in <head>, ma poiché una query multimediale utilizza il simbolo @ e le parentesi {} si scontrano con la sintassi del rasoio:

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

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

C'è un modo per aggirare questo?

— sniffer
fonte

3

Penso ancora che, css stylesdovrebbe essere nel file CSS, soprattutto per un "sito di grandi dimensioni" CSS lineare nella pagina non è la migliore pratica. PS: La mia opinione

— AlexC l'

Sono d'accordo con @AlexC, ma per chi è curioso di un caso d'uso valido, i CSS critici si caricano più velocemente in linea che all'esterno. È un trucco piuttosto utile per quei siti che si affidano a una vernice significativa prima veloce.

— John Pavek,

3

Un altro caso d'uso è il rendering di e

— Jan Zahradník,

477

usa i doppi simboli @@. Ciò sfuggirà al simbolo @ e renderà @media correttamente sul lato client

— Archil
fonte

27

Ricorda anche di aggiungere uno spazio dopo il doppio @@:

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

@@media senza spazio non ha funzionato per me.

— A-Sharabiani
fonte

2

Si è verificato un problema simile a questo durante l'utilizzo di CSS compressi; Penso che @@ sia stato circondato dal testo e quindi Razor ha faticato a interpretarlo. Ho scelto di aggiungere lo spazio prima di @@. Grazie per il consiglio.

— Anthony,

1

Anche con lo spazio, questo non ha funzionato per me. La risposta di Daut con 2 diversi styleelementi ha funzionato però!

— CPHPython,

7

Mi rendo conto che questa è una vecchia domanda, ma questa è l'unica soluzione che ha funzionato per me:

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