@media phương tiện truyền thông truy vấn và cú pháp dao cạo ASP.NET MVC

214

Tôi đã có một trang web lớn chạy trong ASP.NET MVC bằng cách sử dụng công cụ xem dao cạo.

Tôi có một biểu định kiểu cơ sở chứa tất cả các kiểu chung cho toàn bộ trang. Tuy nhiên, đôi khi, tôi có các kiểu trang cụ thể trong <head>trang - thường thì đây là một hoặc 2 dòng.

Tôi không đặc biệt thích đưa CSS vào <head>vì nó không tách biệt mối quan tâm, nhưng đối với một hoặc hai dòng, điều đó thực sự cụ thể cho trang đó, tôi không muốn phải đính kèm một tệp khác và thêm vào băng thông.

Tôi đã có một ví dụ mặc dù tôi muốn đặt một truy vấn phương tiện cụ thể vào trang <head>, nhưng vì một truy vấn phương tiện sử dụng ký hiệu @ và dấu ngoặc {} nó bị xung đột với cú pháp dao cạo:

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

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

Có cách nào tôi có thể vượt qua điều này?

— Đánh hơi
nguồn

3

Tôi vẫn nghĩ rằng, css stylesnên có trong tệp CSS, đặc biệt đối với một css tuyến tính "Trang web lớn" trên trang không phải là cách thực hành tốt nhất. PS: Ý kiến của tôi

— AlexC

Tôi đồng ý với @AlexC, nhưng đối với những người tò mò về trường hợp sử dụng hợp lệ, CSS quan trọng tải nội tuyến nhanh hơn bên ngoài. Đây là một mẹo khá tiện dụng cho những trang web dựa trên lớp sơn có ý nghĩa siêu nhanh đầu tiên.

— John Pavek

3

Một trường hợp sử dụng khác là kết xuất email

— Jan Zahradník

477

sử dụng các ký hiệu @@ kép. Điều đó sẽ thoát biểu tượng @ và hiển thị @media chính xác ở phía máy khách

— cung thủ
nguồn

27

Cũng nhớ thêm một khoảng trắng sau double @@:

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

@@media không có không gian không làm việc cho tôi.

— A-Sharabiani
nguồn

2

Có một vấn đề tương tự như vậy khi sử dụng CSS nén; Tôi nghĩ rằng @@ được bao quanh bởi văn bản và do đó, dao động để giải thích nó. Tôi đã chọn thêm không gian trước @@. Cảm ơn vì tiền hỗ trợ.

— Anthony

1

Ngay cả với không gian, điều này không làm việc cho tôi. Câu trả lời của Daut với 2 styleyếu tố khác nhau đã làm việc!

— CPHPython

7

Tôi nhận ra đây là câu hỏi cũ, nhưng đây là giải pháp duy nhất phù hợp với tôi:

@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
nguồn