Magento 2: style-m.css बनाम style-l.css

10

Magento2 में कैसे style-m.cssऔर style-l.cssफाइलें जेनरेट की जाती हैं?

सिद्धांत style-m.cssमें कम कोड होना चाहिए और मोबाइल उपकरणों के लिए शैलियों की तुलना style-l.cssमें तेजी से मोबाइल उपकरणों पर लोड करना चाहिए।

यदि आप कोड का हिस्सा होना चाहिए style-m.cssया कम फ़ाइल में कैसे परिभाषित करते हैं style-l.css?

निम्नलिखित लिंक और स्रोत कोड ने मुझे इसे समझने में मदद नहीं की।

संसाधन:

magento2 layout css

— अलेक्सी रज़ाकोव
स्रोत

12

ये फाइलें LESS के जरिए जेनरेट की जाती हैं।

सिद्धांत रूप में स्टाइल- m.cs में कम कोड होना चाहिए और मोबाइल उपकरणों के लिए स्टाइल की तुलना में केवल मोबाइल डिवाइस के लिए स्टाइल होना चाहिए ताकि मोबाइल उपकरणों पर तेजी से लोड हो सके।

यह पूरी तरह सही नहीं है। styles-m.cssऔर मोबाइल और डेस्कटॉप दोनों के लिए सीएसएस नियम शामिल हैं इस प्रकार आम तौर पर तुलना में बड़ा है styles-l.cssजो डेस्कटॉप के लिए नियम शामिल हैं। हालांकि, लक्ष्य अभी भी वही है, इस तरह, मोबाइल उपकरणों को डेस्कटॉप उपकरणों के लिए सीएसएस नियमों को डाउनलोड करने की आवश्यकता नहीं है।

उन फ़ाइलों में से किसी एक में शैलियों को "कैसे" रखा जा सकता है, इस सवाल के बारे में, यह Magento UI लाइब्रेरी मीडिया प्रश्नों के माध्यम से किया जाता है जो Magento को आपके LESS नियमों से इन दोनों फ़ाइलों को बनाने में मदद करते हैं।

आपको एक उदाहरण देने के लिए, निम्नलिखित की तरह एक मीडिया ब्लॉक को रखा जाएगा styles-mक्योंकि डेस्कटॉप और मोबाइल डिवाइस दोनों में इस ब्लॉक के नियम "सामान्य रूप में" हैं:

& when (@media-common = true) {
  h1 {
    font-size: 12px;
  } 
}

इस तरह से एक मीडिया क्वेरी ब्लॉक उन डिवाइसों के लिए होगा, जिनमें "स्क्रीन_एक्स" का एक न्यूनतम रिज़ॉल्यूशन है, जो कि 480 पीएक्स और बड़े स्क्रीन रिज़ॉल्यूशन वाले मोबाइल डिवाइस हैं, जिसका अर्थ है कि इसे अभी भी रखा styles-mजाएगा लेकिन जरूरी नहीं कि सभी मोबाइल डिवाइस प्रभावित हों:

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__xs) {
  h1 {
    font-size: 18px;
  }  
}

बदलने (@extremum = 'min')के लिए (@extremum = 'max')इसके विपरीत करने के लिए नियम बदल जाएगा और इस प्रकार केवल एक चौड़ाई 480px गुणित की तुलना में छोटे के साथ उपकरणों प्रभावित करते हैं।

और इस तरह एक ब्लॉक केवल डेस्कटॉप डिवाइस की चिंता करेगा और इस तरह से रखा जाएगा styles-l, क्योंकि सब कुछ 'ऊपर' screen__mको डेस्कटॉप डिवाइस माना जाता है (डिफ़ॉल्ट रूप से):

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
  h1 {
    font-size: 24px;
  }  
}

आप Magento डेवलपर गाइड में इन ब्रेक पॉइंट के बारे में अधिक पढ़ सकते हैं ।

— TiEul
स्रोत

इसका मतलब यह है कि हम ओवरराइड करने के लिए अनुमति नहीं है styles-l.cssऔर styles-m.cssहमारे विषय में?

— ब्लैक

4

के अनुसार default_head_blocks.xmlखाली विषय लेआउट में:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="css/styles-m.css"/>
        <css src="css/styles-l.css" media="screen and (min-width: 768px)"/>
        <css src="css/print.css" media="print"/>
    </head>
</page>

जो मैं समझता हूं, styles-l.cssवह केवल बड़ी स्क्रीन (768px से ऊपर) के styles-m.cssलिए लागू किया जाता है और हर समय लगाया जाता है।

तो यही कारण है कि styles-m.cssअधिक कोड होने के कारण इसमें मोबाइल कोड के साथ-साथ वह कोड भी होता है जो स्क्रीन की चौड़ाई को लागू करता है। styles-l.cssकेवल बड़ी स्क्रीन के लिए कोड शामिल है।

— डिजिटल पियानोवाद पर राफेल
स्रोत

1

"शैलियाँ-m.cs में अधिक कोड है क्योंकि" सच नहीं है, अगर आप मोबाइल-प्रथम दृष्टिकोण का उपयोग करते हैं

— अलेक्सी रेज़ाकोव

2

आप इसे अपने मीडिया क्वेरी फ़ंक्शन और कम गार्ड फ़ंक्शन के साथ परिभाषित करते हैं। उदाहरण के लिए & when (@media-common = true) { ... }स्टाइल- m.css पर जाएं क्योंकि उन शैलियों को हर जगह उपलब्ध होना चाहिए।

मीडिया के प्रश्नों के बारे में बोलते हुए, यह डेस्कटॉप फ़ाइल में जाता है:
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {}

आप यहाँ शैलियों से निपटने के बारे में मेरी स्लाइड्स की जाँच करना चाहते हैं:
https://slidr.io/toh82/how-to-deal-with-styles-in-magento-2#1

— टोबियास हार्टमैन
स्रोत