आपको किस मीडिया क्वेरी ब्रेकप्वाइंट का उपयोग करना चाहिए? (2021)

जब आप एक रिस्पॉन्सिव वेबसाइट बना रहे हों, तो यह जानना भ्रमित करने वाला हो सकता है कि मीडिया क्वेरीज़ को कैसे लिखना है, और कौन से ब्रेकप्वाइंट का उपयोग करना अच्छा है।

क्या आपको min-width का उपयोग करना चाहिए या max-width आपके मीडिया प्रश्नों में? और आपको अपने ब्रेकप्वाइंट में किन उपकरणों को लक्षित करना चाहिए?

हम इस ट्यूटोरियल में उन और अन्य सवालों के जवाब देंगे।

तो सबसे पहले, थोड़ा सा संदर्भ:

सीएसएस में मीडिया क्‍वेरी क्‍या हैं?

मीडिया क्वेरी एक प्रकार का CSS एट-नियम है जिसका उपयोग हम CSS शैलियों के सेट के लिए विशिष्ट परिस्थितियों को लक्षित करने के लिए कर सकते हैं।

वे वही हैं जो उत्तरदायी डिजाइन को संभव बनाते हैं। रिस्पॉन्सिव डिज़ाइन में, हम आमतौर पर मीडिया क्वेरी लिखते समय डिवाइस की चौड़ाई को मानदंड के रूप में उपयोग करते हैं। इस तरह हम अलग-अलग सीएसएस नियमों का उपयोग कर सकते हैं, इस पर निर्भर करते हुए कि उपयोगकर्ता फोन, टैबलेट या डेस्कटॉप स्क्रीन का उपयोग करके वेबसाइट लोड कर रहा है या नहीं।

आइए देखें कि मीडिया के प्रश्नों का उपयोग कैसे किया जा सकता है। यहाँ h1 . के लिए कुछ CSS का त्वरित उदाहरण दिया गया है तत्व:

h1 {
  font-size: 3rem;
}

@media (min-width: 43em){
  h1 {
    font-size: 3.75rem;
  }
}

इस उदाहरण में, सबसे ऊपर, हम पहले डिफ़ॉल्ट font-size . सेट कर रहे हैं h1 . का 3rem पर टैग करें।

फिर उसके नीचे, हमारे पास एक मीडिया क्वेरी एट-नियम है, जिसके अंदर एक सीएसएस स्टाइल नियम निहित है। यह वैकल्पिक नियम font-size . सेट करेगा h1 . के लिए 3.75rem पर तत्व।

मीडिया क्वेरी सिंटैक्स

मीडिया की क्वेरी को करीब से देखने पर, हम देख सकते हैं कि यह दो भागों से बना है:

• एक @media नियमानुसार, और
• एक मीडिया सुविधा नियम।

मीडिया विशेषता जिसे हम लक्षित कर रहे हैं वह उपयोगकर्ता के व्यूपोर्ट की चौड़ाई (उनकी स्क्रीन या ब्राउज़र विंडो का आकार) है। हम min-width . का उपयोग करके चौड़ाई की श्रेणी को लक्षित कर रहे हैं मीडिया सुविधा नियम में, ताकि 43em (688px) या इससे अधिक का कोई भी व्यूपोर्ट मानदंडों को पूरा करे।

यदि उपयोगकर्ता का व्यूपोर्ट मीडिया क्वेरी के मानदंडों को पूरा करता है, तो उस मीडिया क्वेरी में CSS नियम प्रभावी होगा। यह पहले CSS नियम को ओवरराइड कर देगा क्योंकि मीडिया क्वेरी में CSS पहले नियम से अधिक विशिष्ट है।

सीएसएस में ब्रेकप्वाइंट क्या हैं?

रिस्पॉन्सिव डिज़ाइन में, हम अपने मीडिया प्रश्नों में जिस चौड़ाई को लक्षित करते हैं, उसे ब्रेकप्वाइंट कहा जाता है, क्योंकि यही वह बिंदु है जिस पर हम CSS नियमों को बदलेंगे।

उदाहरण के लिए, हमारे h1 . के लिए टैग शैलियाँ, हमारा ब्रेकप्वाइंट 43em (688px) चौड़ा है।

इसका मतलब यह है कि 688px से कम चौड़े व्यूपोर्ट पर, h1 तत्वों का एक font-size होगा 3रेम का। फिर 688px और उससे अधिक पर, कोई भी h1 इसके बजाय टैग 3.75rem होंगे।

CSS चयनकर्ताओं के लिए आपके पास एक से अधिक ब्रेकप्वाइंट भी हो सकते हैं। h1 . में बदलाव जारी रखने के लिए आप अतिरिक्त मीडिया क्वेरी जोड़ सकते हैं जब व्यूपोर्ट बढ़कर 62em (992px) और 87em (1392px) चौड़ा हो जाता है।

आप जितने चाहें उतने ब्रेकप्वाइंट बना सकते हैं, और आप अपनी पसंद की किसी भी चौड़ाई का उपयोग कर सकते हैं।

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

आपको किस ब्रेकप्वाइंट का उपयोग करना चाहिए?

यहां अंगूठे का एक नियम है- मौजूद हर डिवाइस चौड़ाई को लक्षित करने वाले ब्रेकप्वाइंट के साथ टन मीडिया क्वेरी बनाने का प्रयास न करें।

उत्तरदायी डिजाइन के शुरुआती दिनों में यह एक अभ्यास था। लेकिन आजकल, इतने सारे अलग-अलग फोन, टैबलेट और स्क्रीन साइज के साथ, यह व्यावहारिक नहीं है। आप केवल मीडिया प्रश्नों की एक भ्रामक (और अक्षम) संख्या के साथ समाप्त होंगे।

इसके बजाय, अपने डिज़ाइन के आधार पर ब्रेकप्वाइंट चुनने का प्रयास करें।

उदाहरण के लिए, मान लें कि आपके पास एक डिज़ाइन है जिसे आप डेस्कटॉप पर दो कॉलम और मोबाइल और टैबलेट डिवाइस पर एक कॉलम में रखना चाहते हैं।

मोबाइल की चौड़ाई से शुरू करके और ऊपर जाते हुए, व्यूपोर्ट चौड़ाई बिंदु चुनें, जिस पर आप डिज़ाइन को दो स्तंभों में बदलना चाहते हैं। यह आपका ब्रेकपॉइंट होगा।

सामान्य तौर पर, मैं आमतौर पर तीन या चार ब्रेकप्वाइंट के साथ शुरू करता हूं जो मोबाइल से लेकर बड़ी स्क्रीन तक की चौड़ाई को कवर करते हैं।

मान लें कि आपने 43em (688px), 62em (992px) और 82em (1312px) चौड़े ब्रेकप्वाइंट सेट किए हैं। आप जानते हैं कि सभी फ़ोन 688px से कम के होंगे, अधिकांश टैबलेट 688px और 992px के बीच होंगे, छोटी स्क्रीन 992px से 1312px के बीच होगी, और बड़ी स्क्रीन 1312px से अधिक होगी।

यह दृष्टिकोण आपको व्यूपोर्ट चौड़ाई की उन सीमाओं के भीतर सभी उपकरणों को कवर करने देता है।

ब्रेकप्वाइंट की एक छोटी सेट रेंज के साथ काम करने से आपको अपनी प्रतिक्रियाशील शैलियों को सुसंगत बनाए रखने में मदद मिलेगी। और मैं निश्चित रूप से आपको पहले ब्रेकप्वाइंट का एक सेट चुनने के लिए प्रोत्साहित करता हूं, और अपने प्रोजेक्ट में सभी तत्वों के लिए उन्हीं ब्रेकप्वाइंट का उपयोग करता हूं।

इस तरह, आप सभी अलग-अलग चौड़ाई में यादृच्छिक विराम बिंदु नहीं बना रहे हैं, और संभावित रूप से अप्रत्याशित व्यवहार नहीं बना रहे हैं। चीजों को सरल रखें, और ब्रेकप्वाइंट के एक सेट पर टिके रहें। यदि आपको बाद में वास्तव में आवश्यकता हो तो आप हमेशा एक अतिरिक्त विराम बिंदु जोड़ सकते हैं।

क्या आपको अपने ब्रेकप्वाइंट में न्यूनतम-चौड़ाई या अधिकतम-चौड़ाई का उपयोग करना चाहिए?

एक सामान्य प्रश्न जो मुझे बहुत दिखाई देता है, वह यह है कि क्या आपको min-width . का उपयोग करना चाहिए , max-width , या दोनों आपके मीडिया क्वेरी ब्रेकप्वाइंट में।

जिस दृष्टिकोण को मैं अधिकांश लोगों को उपयोग करते हुए देखता हूं, और जिसे मैं स्वयं पसंद करता हूं, वह है केवल min-width का उपयोग करना अपने विराम बिंदुओं में। बूटस्ट्रैप और फाउंडेशन जैसे उत्तरदायी ढांचे, और सीएसएस ट्रिक्स और स्मैशिंग मैगज़ीन जैसी उद्योग साइटें सभी इस पद्धति का उपयोग करती हैं।

इस तरह, आप बिना किसी मीडिया क्वेरी के मोबाइल शैलियों को अपनी डिफ़ॉल्ट शैलियों के रूप में सेट कर सकते हैं। फिर आप न्यूनतम-चौड़ाई वाली मीडिया क्वेरी का उपयोग करके उत्तरोत्तर बड़े उपकरणों के लिए शैलियाँ जोड़ते हैं।

यह मोबाइल-प्रथम दृष्टिकोण है जो हमने अपने h1 . में किया था उदाहरण। यह अधिकांश मामलों के लिए काफी अच्छी तरह से काम करता है, खासकर क्योंकि बड़े व्यूपोर्ट चौड़ाई के लिए अतिरिक्त सीएसएस शैलियों की आवश्यकता होती है जिनकी आपको मोबाइल चौड़ाई के लिए आवश्यकता नहीं होती है।

उत्सुक हैं कि वास्तविक दुनिया के अनुप्रयोग में यह कैसा दिखेगा?

मान लें कि हम किसी वेबसाइट के लिए दो कॉलम लेआउट बनाने के लिए फ्लेक्सबॉक्स का उपयोग करना चाहते हैं।

हमारे HTML मार्कअप में, हमारे <body> . में दो तत्व हैं टैग:<main> मुख्य सामग्री के लिए, और <aside> साइडबार के लिए:

<body>

  <main class="blue">
    <h1>Here is our main content!</h1>  
  </main>

  <aside class="magenta">
    <h2>Here is our sidebar content!</h2>
  </aside>

</body>

हमारी सीएसएस शैलियों में, हम अपनी मुख्य सामग्री के तहत साइडबार को ढेर करना चाहते हैं ताकि सब कुछ एक कॉलम में हो। इसलिए हमें मोबाइल के लिए किसी अतिरिक्त शैली की आवश्यकता नहीं है।

बड़े डेस्कटॉप चौड़ाई पर, हम फ्लेक्सबॉक्स चालू करना चाहते हैं और लेआउट को दो कॉलम में प्रदर्शित करना चाहते हैं। हम इसे सीएसएस में 62em (992px) के मानदंड के साथ एक मीडिया क्वेरी बनाकर कर सकते हैं जो छोटे डेस्कटॉप चौड़ाई से शुरू होकर प्रभावी होगा।

यहाँ उसके लिए CSS है:

@media (min-width: 62em){
  body { display: flex; }  
  main { flex: 1 0 75%; }
  aside { flex: 1 0 25%; }  
}

अब, क्या होगा यदि इसके बजाय हम max-width . का उपयोग करना चाहते हैं मीडिया के प्रश्नों? यह निश्चित रूप से संभव है, लेकिन हमें मोबाइल और टैबलेट की चौड़ाई के लिए फ्लेक्सबॉक्स को इस तरह रद्द करना होगा:

body { display: flex; }
main { flex: 1 0 75%; }
aside { flex: 1 0 25%; }

@media (max-width: 62em){
  body { display: block; }
}

इस मामले में, डेस्कटॉप के लिए हमारी डिफ़ॉल्ट शैलियाँ फ्लेक्सबॉक्स का उपयोग करती हैं। और हमें <body> सेट करके 62em (992px) से छोटी व्यूपोर्ट चौड़ाई के लिए फ्लेक्सबॉक्स को रद्द करना होगा करने के लिए display: block display: flex . के बजाय ।

क्या आपको अपने ब्रेकप्वाइंट में पिक्सल, रेम या एम का उपयोग करना चाहिए?

आपने देखा होगा कि मैं em . का उपयोग कर रहा हूं पिक्सेल के बजाय मेरे ब्रेकप्वाइंट में इकाइयाँ। पिक्सेल हम में से अधिकांश के लिए अधिक परिचित हैं, लेकिन वे सीएसएस में पूर्ण इकाइयाँ हैं। इसका मतलब है कि वे किसी अन्य कारक के संबंध में नहीं बदलते हैं।

इसके विपरीत, सापेक्ष इकाइयाँ जैसे em , rem , और vw इकाइयाँ अन्य कारकों जैसे font-size . के आधार पर अपना अंतिम आकार प्राप्त करती हैं उनके मूल तत्व या ब्राउज़र में रूट फ़ॉन्ट-आकार सेट करें।

सीएसएस में पिक्सेल का उपयोग करने में समस्या (न केवल ब्रेकप्वाइंट में, बल्कि फ़ॉन्ट आकार के लिए) यह है कि निरपेक्ष और अपरिवर्तनीय होने के कारण, वे उपयोगकर्ताओं को आवश्यक होने पर उन्हें समायोजित करने के लिए नियंत्रण नहीं देते हैं। यह एक्सेस-योग्यता के साथ एक समस्या है, और इसलिए font-size जैसे महत्वपूर्ण मापों के लिए पिक्सेल का उपयोग करना आम तौर पर एक अच्छा समाधान नहीं है और ब्रेकप्वाइंट की चौड़ाई।

Zell Liew के पास ब्रेकप्वाइंट और विभिन्न इकाइयों के साथ किए गए परीक्षणों का एक बड़ा लेखन है, जो यह निष्कर्ष निकालता है कि em ब्रेकप्वाइंट "एकमात्र इकाई थी जिसने सभी चार ब्राउज़रों में लगातार प्रदर्शन किया।" सफ़ारी में कुछ बग हैं जिन्हें डैन बर्ज़ो ने प्रलेखित किया है, जहां मोबाइल ब्रेकपॉइंट में ज़ूम करने पर जितनी जल्दी होना चाहिए, उतनी ही जल्दी प्रदर्शित होता है।

मैं सफारी बग पर पहुंच को प्राथमिकता दूंगा, इसलिए मैं अभी भी em . का उपयोग करता हूं इकाइयाँ।

मुझे उम्मीद है कि इस लेख ने यह समझाने में मदद की है कि आपको अपने मीडिया प्रश्नों में किन ब्रेकप्वाइंट का उपयोग करना चाहिए!