@ медіа-запит та зіткнення синтаксису бритви ASP.NET MVC

214

У мене великий сайт, який працює в ASP.NET MVC за допомогою двигуна подання Razor.

У мене є базовий таблиця стилів, яка містить усі загальні стилі для всього сайту. Однак у мене є певні стилі сторінки, які є <head>на сторінці - зазвичай це один або два рядки.

Мені особливо не подобається вводити CSS <head>як його не строго розділення проблем, але для одного-двох рядків, які дійсно характерні для цієї сторінки, я вважаю за краще не прикріплювати інший файл і додавати до пропускної здатності.

У мене є екземпляр, хоч я хотів би ввести медіа-запит <head>, що відповідає певній сторінці , але оскільки медіа-запит використовує символ @ і дужки {}, це стикається з синтаксисом бритви:

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

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

Чи є спосіб я обійти це?

— Sniffer
джерело

3

Я все ще думаю, що це css stylesмає бути у файлі CSS, особливо для лінійного css "Великого сайту" на сторінці - не найкраща практика. PS: Моя думка

— AlexC

Я погоджуюся з @AlexC, але для тих, хто цікавиться дійсним випадком використання, критичний CSS завантажується швидше, ніж зовні. Це досить зручний трюк для тих сайтів, які покладаються на дуже швидку першу змістовну фарбу.

— Джон Павек

3

Ще один випадок використання - це повідомлення електронної пошти

— Jan Zahradník

477

використовувати подвійні символи @@. Це уникне символ @ і візуалізує @media правильно на стороні клієнта

— архіл
джерело

27

Також не забудьте додати пробіл після подвійного @@:

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

@@media без місця для мене не вийшло.

— А-Шарабіані
джерело

2

Виникли подібні проблеми до цього при використанні стисненого CSS; Я думаю, що @@ був оточений текстом, і тому Razor намагався його інтерпретувати. Я вирішив додати пробіл до @@. Дякую за пораду.

— Ентоні

1

Навіть з простором це для мене не вийшло. Відповідь Даута з двома різними 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>
}

— Даут
джерело