@media media query y ASP.NET MVC razor syntax clash

214

Tengo un sitio grande que se ejecuta en ASP.NET MVC usando el motor de vista Razor.

Tengo una hoja de estilo base que contiene todo el estilo genérico para todo el sitio. En ocasiones, sin embargo, tengo estilos específicos de página que, en <head>general, son una o dos líneas.

No me gusta especialmente poner el CSS <head>ya que no es estrictamente una separación de preocupaciones, pero para una o dos líneas, que realmente es específica de esa página, prefiero no tener que adjuntar otro archivo y agregar al ancho de banda.

Sin embargo, tengo una instancia en la que me gustaría poner una consulta de medios específica de la página en el <head>, pero debido a que una consulta de medios usa el símbolo @ y los corchetes {} está en conflicto con la sintaxis de la maquinilla de afeitar:

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

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

¿Hay alguna manera de evitar esto?

— Oledor
fuente

3

Sigo pensando que, css stylesdebería estar en el archivo CSS, especialmente para un "sitio grande" CSS lineal en la página no es la mejor práctica. PD: Mi opinión

— AlexC

Estoy de acuerdo con @AlexC, pero para aquellos curiosos acerca de un caso de uso válido, CSS crítico se carga más rápido en línea que externamente. Es un truco bastante útil para aquellos sitios que dependen de una primera pintura significativa súper rápida.

— John Pavek

3

Otro caso de uso son los correos electrónicos

— Jan Zahradník,

477

use símbolos dobles @@. Eso escapará al símbolo @ y representará @media correctamente en el lado del cliente

— archil
fuente

27

También recuerde agregar un espacio después de double @@:

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

@@media sin espacio no me funcionó.

— A-Sharabiani
fuente

2

Tuve un problema similar a esto al usar CSS comprimido; Creo que el @@ estaba rodeado de texto y Razor tuvo problemas para interpretarlo. Opté por agregar el espacio antes del @@. Gracias por el consejo.

— Anthony

1

Incluso con el espacio, esto no funcionó para mí. Sin embargo, la respuesta de Daut con 2 styleelementos diferentes funcionó.

— CPHPython

7

Me doy cuenta de que esta es una vieja pregunta, pero esta es la única solución que funcionó para mí:

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