CSS Academy · पाठ

कंटेनर क्वेरी बनाम मीडिया क्वेरी

समझें कि घटक-आधारित डिज़ाइन में कंटेनर क्वेरी के बजाय व्यूपोर्ट मीडिया क्वेरी का उपयोग कब करना चाहिए।

पाठ 4, कुल 4 में से12 चरण

कंटेनर क्वेरी बनाम मीडिया क्वेरी, CoddyKit पर CSS Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह CSS Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

मूलभूत अंतर

मीडिया क्वेरी व्यूपोर्ट के आयामों पर प्रतिक्रिया देती हैं। कंटेनर क्वेरी मूल कंटेनर के आयामों पर प्रतिक्रिया देती हैं। यह अंतर तय करता है कि किस समस्या के लिए किस साधन का उपयोग करना चाहिए।

मीडिया क्वेरी: कब उपयोग करें

मीडिया क्वेरी का उपयोग इनके लिए करें:

वैश्विक पृष्ठ विन्यास में बदलाव (एक कॉलम बनाम दो कॉलम)
पृष्ठ के बड़े अनुभागों को दिखाना या छिपाना (मोबाइल पर नेविगेशन ड्रॉअर)
पृष्ठ-स्तरीय टाइपोग्राफी के मूल पैमाने में बदलाव
मुद्रण शैलियाँ
उपयोगकर्ता वरीयता संबंधी क्वेरी (गहरा मोड, कम की गई गति)

कंटेनर क्वेरी: कब उपयोग करें

कंटेनर क्वेरी का उपयोग इनके लिए करें:

घटक-स्तरीय विन्यास में बदलाव (क्षैतिज बनाम ऊर्ध्वाधर कार्ड)
अज्ञात कंटेनरों में रखे गए घटक (साइडबार, मुख्य क्षेत्र, मुख्य क्षेत्र के अंदर साइडबार)
पुनः उपयोग किए जा सकने वाले डिज़ाइन सिस्टम घटक
तृतीय-पक्ष पृष्ठों में एम्बेड किए गए विजेट

स्थानांतरण-क्षमता का तर्क

मीडिया क्वेरी से शैलीबद्ध कार्ड 1200px चौड़े पृष्ठ पर एक ब्रेकपॉइंट पर काम करता है। यदि उस कार्ड को साइडबार में ले जाया जाए, तो उसे अलग ब्रेकपॉइंट की आवश्यकता हो सकती है। कंटेनर क्वेरी के साथ वही कार्ड अपने उपलब्ध स्थान के अनुसार अनुकूलित होकर सीधे काम करता है।

संयुक्त उपयोग

वास्तविक अनुप्रयोग दोनों का उपयोग करते हैं। मीडिया क्वेरी व्यापक विन्यास निर्धारित करती हैं (डेस्कटॉप चौड़ाई पर साइडबार मौजूद होता है), जबकि कंटेनर क्वेरी उस विन्यास के अंदर घटक के व्यवहार को निर्धारित करती हैं।

<div class="layout">
  <div class="sidebar"><div class="card">Sidebar card</div></div>
  <div class="main-content"><div class="card">Main card</div></div>
</div>

कंटेनर क्वेरी की विशिष्टता

मीडिया क्वेरी के विपरीत, जो कोई विशिष्टता नहीं जोड़तीं, कंटेनर क्वेरी संदर्भ-विशिष्टता जोड़ती हैं। @container (min-width: 400px) के अंदर का नियम बाहर मौजूद उसी नियम जितनी ही विशिष्टता रखता है — लेकिन यह केवल उस कंटेनर संदर्भ के अंदर लागू होता है।

ब्राउज़र समर्थन

कंटेनर क्वेरी 2023 से सभी आधुनिक ब्राउज़र में समर्थित हैं (क्रोम 105+, फ़ायरफ़ॉक्स 110+, सफ़ारी 16+)। आधुनिक ब्राउज़र लक्ष्यों वाले नए प्रोजेक्ट में आज इन्हें बिना वैकल्पिक व्यवस्थाओं के सुरक्षित रूप से उपयोग किया जा सकता है।

@supports के साथ क्रमिक उन्नयन

पुराने ब्राउज़र समर्थन की आवश्यकता वाले प्रोजेक्ट के लिए, कंटेनर क्वेरी समर्थन का परीक्षण करने हेतु @supports का उपयोग करें:

<div class="card-wrapper"><div class="card">Progressively enhanced card</div></div>

प्रदर्शन तुलना

कंटेनर क्वेरी की अपनी प्रदर्शन संबंधी विशेषताएँ होती हैं: प्रत्येक container-type तत्व एक लेआउट समावेशन सीमा बनाता है। इससे अंदर के आकार में होने वाले बदलाव बाहर के हिस्से को प्रभावित नहीं करते — जो वास्तव में प्रदर्शन के लिए लाभकारी है। मीडिया क्वेरी में होने वाले बदलाव वैश्विक लेआउट की पुनर्गणना शुरू कर सकते हैं।

कंटेनर क्वेरी की डिबगिंग

Chrome DevTools, Elements पैनल में कंटेनर तत्वों के आगे "cq" बैज दिखाता है। कंटेनर की सीमाएँ देखने और DevTools के लेआउट निरीक्षक से कंटेनर क्वेरी की शर्तों का परीक्षण करने के लिए इस पर क्लिक करें।

त्वरित जाँच

एक डिज़ाइन सिस्टम कार्ड घटक को किसी भी संदर्भ में उपलब्ध चौड़ाई के आधार पर स्टैक किए गए विन्यास से अगल-बगल वाले विन्यास में बदलना आवश्यक है। कौन-सा तरीका बेहतर है?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन

मीडिया क्वेरी वैश्विक व्यूपोर्ट पर प्रतिक्रिया देती हैं, जबकि कंटेनर क्वेरी मूल कंटेनर के आकार पर प्रतिक्रिया देती हैं। वैश्विक विन्यास संबंधी निर्णयों और उपयोगकर्ता वरीयता संबंधी क्वेरी के लिए मीडिया क्वेरी का उपयोग करें। ऐसे पुनः उपयोग किए जा सकने वाले घटकों के लिए कंटेनर क्वेरी का उपयोग करें, जिन्हें अपने संदर्भ के अनुसार अनुकूलित होना आवश्यक है। दोनों को मिलाकर उपयोग करें: व्यापक पृष्ठ विन्यास के लिए मीडिया क्वेरी और उस विन्यास के अंदर घटक-स्तरीय अनुकूलन के लिए कंटेनर क्वेरी।

शुरुआत निःशुल्क

एआई शिक्षक के साथ CSS सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 40
पाठ: 159

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “कंटेनर क्वेरी बनाम मीडिया क्वेरी” पाठ निःशुल्क है?

हाँ—“कंटेनर क्वेरी बनाम मीडिया क्वेरी” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और CSS Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“कंटेनर क्वेरी बनाम मीडिया क्वेरी” में मैं क्या सीखूँगा?

समझें कि घटक-आधारित डिज़ाइन में कंटेनर क्वेरी के बजाय व्यूपोर्ट मीडिया क्वेरी का उपयोग कब करना चाहिए। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ CSS Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या CSS Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर CSS Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।

“कंटेनर क्वेरी बनाम मीडिया क्वेरी” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस CSS Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर CSS Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← CSS Academy पर वापस जाएँ