web-dev-qa-db-ja.com

@mediaメディアクエリとASP.NET MVCかみそりの構文の衝突

Razorビューエンジンを使用してASP.NET MVCで実行される大規模なサイトがあります。

サイト全体のすべての一般的なスタイリングを含むベーススタイルシートがあります。ただし、ページの<head>にあるページ固有のスタイルがある場合があります。通常、これは1行または2行です。

CSSを<head>に配置することは特に気に入らないので、1ページまたは2行の場合は実際にそのページに固有であるため、別のファイルを添付して追加する必要はありません。帯域幅。

しかし、ページ固有のメディアクエリを<head>に配置したいインスタンスがありますが、メディアクエリは@記号と角括弧{}を使用しているため、カミソリ構文と競合しています。

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

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

これを回避する方法はありますか？

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

ダブル@@記号を使用します。それは@記号をエスケープし、クライアント側で@mediaを正しくレンダリングします

426
archil

ダブル@@の後にスペースを追加することも忘れないでください：

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

@@mediaはスペースなしでは機能しませんでした。

22
A-Sharabiani

これは古い質問であることに気づきましたが、これが私にとって有効な唯一の解決策です。

@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