2011-08-11 22 views
145

Tengo un sitio grande que se ejecuta en ASP.NET MVC utilizando el motor Razor view.@media media query y ASP.NET MVC navaja sintaxis 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 el <head> de la página, generalmente esta es una o 2 líneas.

no particularmente como poner el CSS en <head> ya que no es estrictamente la 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 a la ancho de banda

Tengo una instancia aunque donde me gustaría poner una consulta de páginas de medios específicos en el <head>, sino porque una consulta de medios utiliza el símbolo @ y corchetes {} que está chocando con la sintaxis de afeitar:

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

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

¿Hay alguna forma de evitar esto?

+3

Todavía pienso que, 'css styles' debe estar en el archivo CSS, especialmente para un" sitio grande "CSS lineales en la página no es la mejor práctica. * PD: Mi opinión * – AlexC

Respuesta

330

use doble @@ símbolos. Eso va a escapar el símbolo @ y hacer @media correctamente en el lado del cliente

5

Asimismo, recuerda añadir un espacio después de doble @@:

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

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

+1

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