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?

— 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

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