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


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.