@media medya sorgusu ve ASP.NET MVC jilet sözdizimi çakışması

214

Jilet görünüm motoru kullanarak ASP.NET MVC çalışan büyük bir sitem var.

Tüm site için genel stil içeren bir temel stil sayfası var. Ancak bazen, sayfanın içinde hangi sayfaya özgü stilleri var <head>- genellikle bu bir veya 2 satırdır.

Özellikle CSS'yi <head>endişelerin tamamen ayrılması olarak koymaktan hoşlanmıyorum , ancak bir veya iki satır için, bu sayfaya gerçekten özgü, başka bir dosya eklemek ve bant genişliğine eklemek zorunda değilim.

Ben içine bir sayfaya belirli bir medya sorgusu koymak istiyorum ama ben bir örnek var <head>, ama bir medya sorgusu @ sembolü ve parantez {} kullandığından jilet sözdizimi ile çakışıyor:

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

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

Bunu atlatmanın bir yolu var mı?

— Sniffer
kaynak

3

Ben hala css styles, özellikle "Büyük site" için CSS dosyasında olması gerektiğini düşünüyorum Sayfadaki doğrusal css en iyi uygulama değildir. Not: Bence

— AlexC

@AlexC ile hemfikirim, ancak geçerli bir kullanım durumunu merak edenler için kritik CSS harici olarak olduğundan daha hızlı yüklenir. Süper hızlı ilk anlamlı boyaya dayanan siteler için oldukça kullanışlı bir numara.

— John Pavek

3

Başka bir kullanım örneği, e-posta oluşturma

— Jan Zahradník

477

double @@ sembollerini kullanın. Bu, @ simgesinden kaçacak ve @media'yı istemci tarafında doğru şekilde oluşturacak

— archil
kaynak

27

Ayrıca double @@ 'dan sonra bir boşluk eklemeyi unutmayın:

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

@@media boşluksuz benim için çalışmadı.

— A-Sharabiani
kaynak

2

Sıkıştırılmış CSS kullanırken buna benzer bir sorun vardı; Sanırım @@ metinle çevriliydi ve bu yüzden Razor onu yorumlamak için mücadele etti. @@'Den önce boşluk eklemeyi seçtim. Bahşiş için teşekkürler.

— Anthony

1

Alanla bile, bu benim için işe yaramadı. Daut'un 2 farklı styleunsurla cevabı işe yaradı!

— CPHPython

7

Bunun eski bir soru olduğunun farkındayım, ama bu benim için işe yarayan tek çözüm:

@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
kaynak