@media media query y ASP.NET Choque de sintaxis de maquinilla de afeitar MVC

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

Tengo una hoja de estilos 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 el <head> de la página - por lo general esto es una o 2 líneas.

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

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

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

Author: BoltClock, 2011-08-11
Source

3 answers

Utilice los símbolos double@@. Que escapará @ symbol y representará @media correctamente en el lado del cliente

 373
Author: archil,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-03-06 17:32:23

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

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

@@media sin espacio no funcionó para mí.

 15
Author: A-Sharabiani,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-07-31 21:54:03

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>
}
 0
Author: Daut,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-09-25 14:15:15