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

214

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>
}

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

— スニファー
ソース

3

それでもcss styles、特に「大規模サイト」の場合、CSSファイルに配置する必要があると思います。ページ上のLinear cssはベストプラクティスではありません。PS：私の意見

— AlexC

@AlexCに同意しますが、有効なユースケースに興味がある人にとって、重要なCSSは外部よりもインラインで高速にロードされます。これは、超高速の最初の意味のあるペイントに依存しているサイトにとってはかなり便利なトリックです。

— John Pavek、

3

別のユースケースは、電子メールをレンダリングしている

— 月Zahradník

477

二重の@@記号を使用します。@記号をエスケープし、クライアント側で@mediaを正しくレンダリングします

— Archil
ソース

27

また、@@の後にスペースを追加してください。

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

@@media スペースがないのでうまくいきませんでした。

— A-Sharabiani
ソース

2

圧縮されたCSSを使用する場合、これと同様の問題がありました。@@はテキストで囲まれていたので、Razorはそれを解釈するのに苦労しました。@@の前にスペースを追加することにしました。先端をありがとう。

— アンソニー

1

スペースがあっても、これは私にはうまくいきませんでした。ただし、2つの異なるstyle要素を使用したDautの回答は機能しました。

— CPHPython

7

私はこれが古い質問であることを理解していますが、これが私のために働いた唯一の解決策です：

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


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

— ドート
ソース