consulta de mídia @media e conflito de sintaxe do asp.net MVC razor

214

Eu tenho um site grande que é executado no ASP.NET MVC usando o mecanismo de exibição Razor.

Eu tenho uma folha de estilo base que contém todo o estilo genérico para todo o site. Na ocasião, no entanto, tenho estilos específicos de página que na <head>página - geralmente são uma ou duas linhas.

Não gosto particularmente de inserir o CSS <head>como uma separação estrita de preocupações, mas para uma ou duas linhas, que é realmente específica dessa página, prefiro não precisar anexar outro arquivo e adicionar largura de banda.

Porém, eu tenho uma instância na qual gostaria de colocar uma consulta de mídia específica da página <head>, mas porque uma consulta de mídia usa o símbolo @ e os colchetes {} está em conflito com a sintaxe do razor:

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

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

Existe uma maneira de contornar isso?

css asp.net-mvc-3 razor media-queries Farejador
fonte
3
Eu ainda acho que, css stylesdeve estar no arquivo CSS, especialmente para um "site grande" CSS linear na página não é a melhor prática. PS: Minha opinião
AlexC 11/08
Concordo com o @AlexC, mas para os curiosos sobre um caso de uso válido, o CSS crítico carrega mais rápido em linha do que externamente. É um truque bastante útil para sites que contam com uma primeira pintura significativa super rápida.
John Pavek
3
Outro caso de uso é renderizar e
Jan Zahradník

Respostas:

477

use símbolos @@ duplos. Isso escapará do símbolo @ e renderizará a mídia corretamente no lado do cliente

archil
fonte
27

Lembre-se também de adicionar um espaço após double @@:

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

@@media sem espaço não funcionou para mim.

A-Sharabiani
fonte
2
Teve um problema semelhante ao usar CSS compactado; Acho que o @@ estava cercado de texto e, portanto, Razor se esforçou para interpretá-lo. Optei por adicionar o espaço antes do @@. Obrigado pela dica.
Anthony
1
Mesmo com o espaço, isso não funcionou para mim. A resposta de Daut com 2 styleelementos diferentes funcionou!
CPHPython
7

Sei que essa é uma pergunta antiga, mas esta é a única solução que funcionou para mim:

@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