@ मीडिया मीडिया क्वेरी और ASP.NET MVC रेजर सिंटैक्स क्लैश

214

मुझे एक बड़ी साइट मिली है जो रेजर व्यू इंजन का उपयोग करके ASP.NET MVC में चलती है।

मेरे पास एक बेस स्टाइलशीट है जिसमें पूरी साइट के लिए सभी सामान्य स्टाइल शामिल हैं। इस अवसर पर, मेरे पास पृष्ठ विशिष्ट शैलियाँ हैं जो <head>पृष्ठ में हैं - आमतौर पर यह एक या 2 पंक्तियाँ हैं।

मैं विशेष रूप से सीएसएस <head>को नहीं डालना पसंद करता हूं क्योंकि इसकी चिंताओं को कड़ाई से अलग नहीं किया जाता है, लेकिन एक या दो पंक्तियों के लिए, जो वास्तव में उस पृष्ठ के लिए विशिष्ट है, मुझे पसंद है कि मुझे कोई अन्य फ़ाइल संलग्न करना और बैंडविड्थ में जोड़ना न पड़े।

हालांकि मुझे एक उदाहरण मिला है कि मैं एक पृष्ठ विशिष्ट मीडिया क्वेरी को कहां रखना चाहूंगा <head>, लेकिन क्योंकि मीडिया क्वेरी @ प्रतीक और कोष्ठक का उपयोग करता है {} यह रेजर सिंटैक्स के साथ टकरा रहा है:

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

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

क्या कोई ऐसा तरीका है जिससे मैं इधर-उधर हो सकता हूं?

— रूमाल
स्रोत

3

मुझे अभी भी लगता है कि, css stylesसीएसएस फ़ाइल में होना चाहिए, विशेष रूप से पृष्ठ पर "बड़ी साइट" रैखिक सीएसएस के लिए सबसे अच्छा अभ्यास नहीं है। PS: मेरी राय

— एलेक्स '

मैं @AlexC से सहमत हूं, लेकिन एक वैध उपयोग मामले के बारे में उत्सुक लोगों के लिए, गंभीर सीएसएस बाहरी रूप से तेजी से इनलाइन लोड करता है। यह उन साइटों के लिए एक बहुत ही आसान ट्रिक है जो एक सुपर फास्ट फर्स्ट सार्थक पेंट पर भरोसा करते हैं।

— जॉन पावेक

3

एक अन्य उपयोग मामला ईमेल प्रदान कर रहा है

— Jan Zahradník

477

डबल @@ प्रतीकों का उपयोग करें। यह @ प्रतीक से बच जाएगा और ग्राहक पक्ष पर @media को सही ढंग से प्रस्तुत करेगा

— Archil
स्रोत

27

यह भी याद रखें कि डबल @@ के बाद एक स्थान जोड़ना है:

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

@@media मेरे लिए कोई जगह नहीं थी।

— ए-Sharabiani
स्रोत

2

संपीड़ित सीएसएस का उपयोग करते समय इसके समान मुद्दा था; मुझे लगता है कि @@ पाठ से घिरा हुआ था और इसलिए रेजर ने इसे व्याख्या करने के लिए संघर्ष किया। मैंने @@ से पहले स्थान जोड़ने का विकल्प चुना। पारितोषिक के लिए धन्यवाद।

— एंथनी

1

अंतरिक्ष के साथ भी, यह मेरे काम नहीं आया। 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
स्रोत