@ मीडिया-आम - हमें इसका उपयोग करने की आवश्यकता क्यों है?


12

Magento 2 के लिए आवश्यक दस्तावेज में निम्नलिखित शामिल हैं:

@ मीडिया-आम: सच | गलत - आम शैलियों का उत्पादन करना है या नहीं। आम शैलियों के लिए हर बार आपको कुछ शैलियों को जोड़ना चाहिए जिनका आपको उपयोग करना चाहिए

& when (@media-common = true) {
    your styles
}

सवाल

इसे उपयोग करने और इसके बिना केवल कम लिखने के बीच क्या अंतर है? जैसे कि:

& when (@media-common = true) {
    body {
        background: blue;
    }
}

यह कैसे अलग तरह से संकलित करता है:

body {
    background: blue;
}

क्या इसे स्टाइल- l.css और स्टाइल-m.css पर ध्यान दिए बिना आउटपुट किया जाएगा?

जवाबों:


16

Magento 2 मोबाइल फर्स्ट एप्रोच का अनुसरण करता है और @ मीडिया-कॉमन = सच को उन शैलियों को परिभाषित करने के लिए डिज़ाइन किया गया है जो आधार (मोबाइल) हैं और इसमें मौजूद होना चाहिए styles-m.css। यदि आप इस घोषणा शैलियों को छोड़ देते हैं, तो इसे फ़ाइलों styles-m.cssऔर styles-l.cssफ़ाइलों दोनों के लिए आउटपुट किया जाएगा ।


आह कि अधिक समझ में आता है, धन्यवाद। इसलिए जब मीडिया-सामान्य = सही है, तो यह केवल स्टाइल-एम.केएस के लिए आउटपुट होगा, और मीडिया-कॉमन = गलत सेट करना समान है, इसका उपयोग न करना?
— बेन क्रुक

1
हाँ। वास्तव में मीडिया-आम: गलत; में styles-l.lessही प्रयोग किया जाता है । इसलिए मुझे नहीं लगता कि किसी ने कभी इसे falseउद्देश्य पर सेट किया होगा , जब तक कि कुछ कस्टम स्टैंड-अलोन सीएसएस फ़ाइल के लिए नहीं, हो सकता है? बैकएंड शैलियों के लिए आप दोनों का उपयोग कर सकते हैं: @ मीडिया-कॉमन या उस घोषणा को छोड़ दें, क्योंकि सभी शैली एकल सीएसएस फ़ाइल पर हैं।
— ओल्गा

गैर-मोबाइल डिस्प्ले पर मैगनेटो जोड़ता है styles-l.less, इसलिए styles-m.lessअभी भी सभी शैलियाँ लागू होती हैं, इसलिए मीडिया-कॉमन के बाहर कोड क्यों : दोनों फाइलों में सही जोड़ा गया है?
— वोल्वॉक्स

@ वोल्वॉक्स बिल्कुल। का उपयोग नहीं क्योंकि सच: मीडिया-आम इच्छा उत्पादन दोनों के लिए शैली styles-l.lessऔर styles-m.less। मीडिया-कॉमन का उपयोग करते हुए : यह स्टाइल-एम में स्टाइल आउटपुट करेगा, लेकिन यह वास्तव में मोबाइल और डेस्कटॉप दोनों पर लागू होगा! मैं यह सुनिश्चित करने के लिए अब जाँच करने वाला हूँ।
— मोहम्मद जोरेद
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.