web-dev-qa-db-fra.com

Requête multimédia @media et conflit de syntaxe de rasoir ASP.NET MVC

J'ai un grand site qui s'exécute dans ASP.NET MVC à l'aide du moteur d'affichage Razor.

J'ai une feuille de style de base qui contient tout le style générique pour tout le site. À l’occasion, cependant, j’ai des styles de page spécifiques qui, dans le <head> de la page - généralement une ou deux lignes.

Je n'aime pas particulièrement mettre le CSS dans <head> comme ce n’est pas une séparation stricte des préoccupations, mais pour une ou deux lignes, qui est vraiment spécifique à cette page, je préfère ne pas avoir à joindre un autre fichier et à ajouter de la bande passante.

J'ai cependant un exemple où je voudrais placer une requête multimédia spécifique à une page dans le <head>, mais comme une requête multimédia utilise le symbole @ et les crochets {}, elle se heurte à la syntaxe razor:

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

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

Y a-t-il un moyen de contourner cela?

cssasp.net-mvc-3razormedia-queries
195
Sniffer

utilisez des symboles doubles @@. Cela échappera @ symbol et rendra correctement @media côté client

426
archil

Pensez également à ajouter un espace après double @@:

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

@@media sans espace n'a pas fonctionné pour moi.

22
A-Sharabiani

Je réalise que c’est une vieille question, mais c’est la seule solution qui a fonctionné pour moi:

@section cphPageHead{
    <style type="text/css" media="screen and (max-width:959px)">
    </style>


    <style type="text/css" media="screen and (min-width:960px)">
    </style>
}
4
Daut