1. ホーム
  2. css

[解決済み】@media メディアクエリと ASP.NET MVC razor 構文の衝突

2022-04-04 06:57:22

質問

ASP.NET MVCでRazorビューエンジンを使用した大規模なサイトを持っています。

サイト全体の汎用的なスタイルをすべて含む基本スタイルシートがあります。 しかし、時々、ページ固有のスタイルがあり、それを <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>
}  

これを回避する方法はあるのでしょうか?

どのように解決するのですか?

は2重の@@記号を使用します。これにより、@ 記号がエスケープされ、クライアント側で @media が正しくレンダリングされます。