@ สื่อสื่อแบบสอบถามและการขัดแย้งไวยากรณ์ ASP.NET MVC

214

ฉันมีเว็บไซต์ขนาดใหญ่ที่ทำงานใน ASP.NET MVC โดยใช้เอ็นจิ้นมุมมองมีดโกน

ฉันมีสไตล์ชีทพื้นฐานซึ่งประกอบด้วยสไตล์ทั่วไปทั้งหมดสำหรับไซต์ทั้งหมด อย่างไรก็ตามในบางครั้งฉันมีรูปแบบเฉพาะของหน้าซึ่งใน<head>หน้า - โดยปกติจะเป็นหนึ่งหรือสองบรรทัด

ฉันไม่ชอบใส่ CSS <head>เป็นพิเศษเพราะมันไม่ใช่การแยกข้อกังวลอย่างจริงจัง แต่สำหรับหนึ่งหรือสองบรรทัดที่เป็นจริงสำหรับหน้านั้นฉันไม่ต้องการแนบไฟล์อื่นและเพิ่มแบนด์วิดท์

ฉันมีอินสแตนซ์ที่ฉันต้องการใส่เคียวรีสื่อบันทึกของหน้าเฉพาะลงใน<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

ใช้สัญลักษณ์คู่ @@ นั่นจะหลบหนีสัญลักษณ์ @ และแสดง @ สื่อได้อย่างถูกต้องในฝั่งไคลเอ็นต์

— Archil
แหล่งที่มา

27

และอย่าลืมเพิ่มช่องว่างหลังจาก double @@:

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

@@media ไม่มีที่ว่างไม่ทำงานสำหรับฉัน

— A-Sharabiani
แหล่งที่มา

2

มีปัญหาคล้ายกันนี้เมื่อใช้ CSS ที่บีบอัด ฉันคิดว่า @@ ถูกรายล้อมไปด้วยข้อความดังนั้นมีดโกนจึงพยายามตีความมัน ฉันเลือกที่จะเพิ่มช่องว่างก่อน @@ ขอบคุณสำหรับทิป.

— แอนโทนี่

1

แม้จะมีพื้นที่ว่าง แต่มันก็ไม่ได้ผลสำหรับฉัน คำตอบของ Daut ที่มี 2 styleองค์ประกอบที่ต่างกันก็ใช้งานได้!

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

— Daut
แหล่งที่มา