@media media query dan ASP.NET MVC clash syntax clash

214

Saya punya situs besar yang berjalan di ASP.NET MVC menggunakan mesin Razor view.

Saya memiliki stylesheet dasar yang berisi semua gaya umum untuk seluruh situs. Namun, kadang-kadang, saya memiliki gaya khusus halaman yang pada <head>halaman - biasanya ini adalah satu atau 2 baris.

Saya tidak terlalu suka menempatkan CSS <head>sebagai tidak sepenuhnya pemisahan masalah, tetapi untuk satu atau dua baris, yang benar-benar khusus untuk halaman itu, saya lebih suka tidak harus melampirkan file lain dan menambah bandwidth.

Meskipun demikian, saya memiliki contoh di mana saya ingin memasukkan kueri media khusus laman <head>, tetapi karena kueri media menggunakan simbol @ dan kurung {} itu berbenturan dengan sintaks silet:

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

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

Apakah ada cara saya bisa mengatasi ini?

css asp.net-mvc-3 razor media-queries Sapu tangan
sumber
3
Saya masih berpikir bahwa, css stylesharus di file CSS, terutama untuk "Situs besar" css Linear pada halaman bukan praktik terbaik. PS: Pendapat saya
AlexC
Saya setuju dengan @AlexC, tetapi bagi mereka yang ingin tahu tentang kasus penggunaan yang valid, CSS kritis memuat lebih cepat sebaris daripada eksternal. Ini adalah trik yang cukup berguna untuk situs-situs yang mengandalkan cat bermakna pertama dan super cepat.
John Pavek
3
Kasus penggunaan lainnya adalah rendering email
Jan Zahradník

Jawaban:

477

gunakan simbol @@ ganda. Itu akan keluar dari simbol @ dan merender @ media dengan benar di sisi klien

Archil
sumber
27

Ingat juga untuk menambahkan spasi setelah double @@:

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

@@media tanpa ruang tidak bekerja untuk saya.

A-Sharabiani
sumber
2
Punya masalah serupa dengan ini ketika menggunakan CSS terkompresi; Saya pikir @@ dikelilingi oleh teks dan jadi Razor berjuang untuk menafsirkannya. Saya memilih untuk menambahkan spasi sebelum @@. Terima kasih atas tipnya.
Anthony
1
Bahkan dengan ruang, ini tidak berhasil untuk saya. Jawaban Daut dengan 2 styleelemen berbeda berhasil!
CPHPython
7

Saya menyadari ini adalah pertanyaan lama, tetapi ini adalah satu-satunya solusi yang bekerja untuk saya:

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