हिन्दी

English
Español
Português
中文
日本語
한국어

हिन्दी

English
Español
Português
中文
日本語
한국어

Appearance

Interactive coursesLearn by building 🚀 Hundreds of hours of interactive lessons, coding challenges, and projects across web, Python, and AI. Pause, tweak the code, and build along in the browser. See all courses
This page has been auto-translated and may contain errors.View in English

प्रतिक्रियाशील डिजाइन ​

docs.scrimba.com

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

प्रतिक्रियाशील का अर्थ और व्यूपोर्ट ​

एक प्रतिक्रियाशील पेज वह है जो किसी भी स्क्रीन पर अपने आप को फिर से आकार देता है। एक ही HTML और एक ही CSS फोन, टैबलेट और डेस्कटॉप पर काम करते हैं, और लेआउट समायोजित होता है ताकि कुछ भी ओवरफ्लो न हो और कुछ भी तंग न लगे। आप तीन साइटें नहीं बना रहे हैं। आप एक ऐसी साइट बना रहे हैं जो झुकती है।

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

html
<meta name="viewport" content="width=device-width, initial-scale=1" />

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

प्रतिक्रियाशील डिजाइन का मतलब है एक एकल कोडबेस जो व्यूपोर्ट के आकार के अनुसार अपना लेआउट अनुकूलित करता है, जो ब्राउज़र विंडो के अंदर पेज का दृश्यमान क्षेत्र है। एक ही HTML और एक ही स्टाइलशीट है; जो बदलता है वह यह है कि स्टाइलशीट को दिए गए स्थान के लिए कैसे प्रतिक्रिया देता है। विकल्प, अलग मोबाइल और डेस्कटॉप साइटें, आपके रखरखाव को दोगुना करती हैं और यही कारण है कि उद्योग वर्षों पहले प्रतिक्रियाशील पर बस गया।

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

html
<meta name="viewport" content="width=device-width, initial-scale=1" />

width=device-width लेआउट व्यूपोर्ट को स्क्रीन से मेल खाता है, और initial-scale=1 शुरुआती ज़ूम को 100% पर सेट करता है। इसे छोड़ दें और कोई भी सही CSS लेआउट को नहीं बचा सकता, क्योंकि ब्राउज़र गलत चौड़ाई के खिलाफ माप रहा है।

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

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

html
<meta name="viewport" content="width=device-width, initial-scale=1" />

width=device-width लेआउट व्यूपोर्ट को डिवाइस की अपनी CSS-पिक्सल चौड़ाई से जोड़ता है, और initial-scale=1 प्रारंभिक ज़ूम को पिन करता है ताकि दोनों व्यूपोर्ट संरेखित हो जाएं। यह HTML हेड में है, और यह एक शिष्टाचार नहीं, एक पूर्वापेक्षा है: इसके बिना ब्राउज़र आपकी मीडिया क्वेरीज़ और प्रतिशत का मूल्यांकन 390px फोन पर लगभग 980px के विरुद्ध करता है, इसलिए एक min-width: 40rem क्वेरी तब फायर होती है जब उसे नहीं होना चाहिए और आपने परीक्षण किया गया लेआउट कभी दिखाई नहीं देता। इस अध्याय में सब कुछ मानता है कि यह टैग मौजूद है।

Junoप्रतिक्रियाशील का अर्थ और व्यूपोर्ट एक प्रतिक्रियाशील पेज ऐसा है जो किसी भी स्क्रीन पर खुद को फिर से आकार देता है, फोन से डेस्कटॉप तक, HTML और CSS के एक सेट से। इससे पहले कि आपका CSS एक न्यायसंगत मौका पाए, HTML हेड को व्यूपोर्ट मेटा टैग की आवश्यकता होती है, जो फोन को डेस्कटॉप का नाटक करने की जगह अपनी वास्तविक चौड़ाई का उपयोग करने के लिए कहता है। इसे छोड़ दें और लेआउट टूट जाता है, चाहे CSS कितना अच्छा हो।
Junoप्रतिक्रियाशील का अर्थ और व्यूपोर्ट प्रतिक्रियाशील का मतलब है एक कोडबेस जो व्यूपोर्ट, दृश्यमान पेज क्षेत्र के अनुकूल होता है, अलग मोबाइल और डेस्कटॉप बिल्ड नहीं। HTML हेड में व्यूपोर्ट मेटा टैग शुरुआती आवश्यकता है: width=device-width ब्राउज़र को वास्तविक स्क्रीन चौड़ाई के विरुद्ध लेआउट करने देता है। इसे छोड़ दें और आपकी मीडिया क्वेरीज़ नकली डेस्कटॉप चौड़ाई के विरुद्ध फायर होती हैं, इसलिए सही CSS अभी भी गलत दिखता है।
Junoप्रतिक्रियाशील का अर्थ और व्यूपोर्ट हर प्रतिशत और मीडिया क्वेरी व्यूपोर्ट चौड़ाई के विरुद्ध हल होता है, इसलिए व्यूपोर्ट मेटा टैग एक शिष्टाचार के बजाय एक पूर्वापेक्षा है। width=device-width, initial-scale=1 लेआउट व्यूपोर्ट को विरासत 980px डिफ़ॉल्ट की जगह डिवाइस की वास्तविक चौड़ाई से जोड़ता है। फोन पर इसे भूल जाएं और एक min-width: 40rem क्वेरी तब फायर होती है जब उसे नहीं होना चाहिए, और आपने परीक्षण किया गया लेआउट कभी प्रतिपादित नहीं होता।

पहले तरल लेआउट ​

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

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

css
.container {
  width: 90%;              /* जो भी स्थान इसके पास है उसका 90% लेता है */
  max-width: 60rem;        /* लेकिन बड़ी स्क्रीन पर 60rem से कभी चौड़ा नहीं */
  margin: 0 auto;          /* केंद्रित */
}

फोन पर यह कंटेनर एक संकीर्ण स्क्रीन का 90% है। मॉनिटर पर यह 60rem पर बढ़ना बंद कर देता है और केंद्रित बैठता है। आपने एक फोन नियम नहीं लिखा; मूल्यों ने अनुकूलन किया।

मीडिया क्वेरीज़ से पहले, तरल मूल्यों के बाहर लेआउट बनाएं ताकि यह अपने आप फ्लेक्स हो। सापेक्ष इकाइयां और प्रतिशत तत्वों को एक निश्चित आकार के बजाय अपने कंटेनर का एक हिस्सा लेने देती हैं, और flexbox और grid पहले से ही अपने बच्चों को अंतरिक्ष परिवर्तन के रूप में पुनर्वाहित करते हैं। एक अच्छा तरल लेआउट एक कठोर के मुकाबले कहीं कम ब्रेकपॉइंट की आवश्यकता होती है, क्योंकि यह पहली जगह स्क्रीन से लड़ नहीं रहा है।

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

css
.card-grid {
  display: grid;
  gap: 1.5rem;
  /* जितने कॉलम 16rem न्यूनतम पर फिट हो सकते हैं, बचे हुए स्थान को समान रूप से साझा करते हैं */
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

repeat(auto-fit, minmax(16rem, 1fr)) कहता है "जितने कॉलम आप 16rem न्यूनतम पर फिट कर सकते हैं, फिर उन्हें पंक्ति को भरने के लिए फैलाएं"। चौड़ी स्क्रीन पर तीन कॉलम, टैबलेट पर दो, फोन पर एक, और एक मीडिया क्वेरी नहीं। इन मूल्यों के लिए किन सापेक्ष इकाइयों को वरीयता देनी है यह आकार निर्धारण इकाइयों में शामिल है।

सबसे मजबूत प्रतिक्रियाशील लेआउट एक भी मीडिया क्वेरी लिखे जाने से पहले आमतौर पर तरल होते हैं, क्योंकि ब्रेकपॉइंट एक असतत कूद है और अधिकांश काम निरंतर है। प्रतिशत, max-width, और flexbox और grid में निर्मित आंतरिक आकार देने के लिए लेआउट व्यूपोर्ट को सुचारू रूप से ट्रैक करने देता है, और मीडिया क्वेरीज़ तब केवल उन बिंदुओं को संभालते हैं जहां डिजाइन वास्तव में आकार बदलने की जरूरत है, बीच में आकार बदलने के हर पिक्सल को नहीं।

जो पैटर्न इसके लिए काम करता है वह स्व-समायोजन ग्रिड है, क्योंकि यह ब्रेकपॉइंट के एक पूरे सेट को एक घोषणा में संक्षिप्त करता है:

css
.card-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

minmax(16rem, 1fr) प्रत्येक ट्रैक को 16rem की एक मंजिल और मुक्त स्थान के एक समान हिस्से की एक छत देता है, और auto-fit उस मंजिल पर कई ट्रैक बनाता है जितने फिट हो सकते हैं, फिर पंक्ति को भरने के लिए उन्हें विस्तारित करता है। कॉलम गिनती स्वचालित रूप से कंटेनर चौड़ाई से बाहर आती है, इसलिए एक लेआउट जिसमें तीन ब्रेकपॉइंट लगते हैं कोई नहीं लगता। एक परिशुद्धि नोट ले जाने योग्य: auto-fit खाली ट्रैक को संक्षिप्त करता है ताकि मौजूदा आइटम बचे हुए स्थान में फैलें, जबकि auto-fill खाली ट्रैक को आरक्षित रखता है, इसलिए जब आप आइटम को बचे हुए स्थान में बढ़ाना चाहते हैं तो auto-fit चुनें और जब आप एक स्थिर ग्रिड चाहते हैं तो auto-fill। आकार निर्धारण इकाइयों को देखें कि ये rem और fr मूल्य कैसे हल होते हैं।

Junoपहले तरल लेआउट बहुत सारी प्रतिक्रियाशीलता आपके द्वारा कोई विशेष नियम लिखने से पहले मुफ्त है: प्रतिशत का उपयोग करें ताकि बॉक्स अपने स्थान का एक हिस्सा लें, और max-width ताकि वे फोन पर सिकुड़ें बिना मॉनिटर पर बहुत चौड़े हुए। ये दो मूल्य अपने आप लेआउट को अनुकूलित करते हैं। पहले तरल बनाएं, और आपको अगले आने वाले फोन-विशिष्ट नियमों की बहुत कम आवश्यकता होगी।
Junoपहले तरल लेआउट ब्रेकपॉइंट से पहले तरल बनाएं: प्रतिशत और max-width चौड़ाई को संभालते हैं, और flexbox और grid पहले से ही अपने आप को पुनर्वाहित करते हैं। याद रखने योग्य एक ग्रिड लाइन है repeat(auto-fit, minmax(16rem, 1fr)), जो आपको शून्य मीडिया क्वेरीज़ के साथ एक प्रतिक्रियाशील कार्ड वॉल देता है। केवल तब तक एक क्वेरी तक पहुंचें जब तरल लेआउट वास्तव में सामना करना बंद कर दे।
Junoपहले तरल लेआउट एक ब्रेकपॉइंट एक असतत कूद है, लेकिन आकार बदलना निरंतर है, इसलिए प्रतिशत, max-width, और आंतरिक flex और grid आकार देने को सुचारू हिस्सा ले जाने दें और वास्तविक आकार परिवर्तनों के लिए मीडिया क्वेरीज़ बचाएं। repeat(auto-fit, minmax(16rem, 1fr)) कई ब्रेकपॉइंट को एक पंक्ति में संक्षिप्त करता है। याद रखें कि auto-fit खाली ट्रैक को संक्षिप्त करता है आपके आइटम को फैलाने के लिए, जबकि auto-fill उन्हें आरक्षित रखता है।

मीडिया क्वेरीज़ ​

कभी-कभी तरल मूल्य पर्याप्त नहीं होते हैं और आपको लेआउट को वास्तव में एक निश्चित आकार पर बदलने की आवश्यकता होती है, उदाहरण के लिए एक मेनू जो फोन पर लंबवत स्टैक होता है लेकिन डेस्कटॉप पर एक पंक्ति में बैठता है। यह मीडिया क्वेरी के लिए है: CSS का एक ब्लॉक जो केवल तब लागू होता है जब स्क्रीन एक शर्त को पूरा करता है जो आपने सेट की है।

छोटी स्क्रीन के लिए शैलियों के साथ शुरू करें जैसे कि आपका सामान्य CSS, फिर एक क्वेरी जोड़ें जो चौड़ी-स्क्रीन परिवर्तनों को परत करता है:

css
.nav {
  display: flex;
  flex-direction: column;   /* छोटी स्क्रीन पर स्टैक किया गया */
}

@media (min-width: 40rem) {
  .nav {
    flex-direction: row;    /* एक बार जब कमरा हो तो एक पंक्ति में */
  }
}

@media (min-width: 40rem) के अंदर नियम केवल तब चलता है जब स्क्रीन कम से कम 40rem चौड़ी हो। उसके नीचे, साधारण .nav नियम लागू होता है और मेनू स्टैक होता है।

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

css
.layout {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;      /* आधार: एकल कॉलम, छोटी स्क्रीन */
}

@media (min-width: 40rem) {
  .layout {
    grid-template-columns: 1fr 1fr; /* एक बार कमरा हो तो दो कॉलम */
  }
}

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

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

css
.layout {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;       /* आधार, हर जगह लागू होता है */
}

@media (min-width: 40rem) {         /* टैबलेट और ऊपर */
  .layout { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 64rem) {         /* डेस्कटॉप और ऊपर */
  .layout { grid-template-columns: 1fr 2fr 1fr; }
}

योगात्मक min-width को घटाते हुए max-width के बजाय पसंद करने का कारण CASCADE है। क्योंकि ये क्वेरीज़ विशिष्टता साझा करती हैं, बाद में फायर होने वाली क्वेरीज़ पहले वाली को ओवरराइड करती हैं, इसलिए उन्हें छोटे से बड़े तक व्यवस्थित करने का अर्थ है कि प्रत्येक चौड़ी ब्रेकपॉइंट जहां यह लागू होता है वहां स्पष्ट रूप से जीतता है। दो परिशुद्धताएं पकड़ने के लायक हैं: शर्त में px की जगह rem को वरीयता दें ताकि ब्रेकपॉइंट उपयोगकर्ता के फ़ॉन्ट आकार को ट्रैक करे, और जानें कि चौड़ाई क्वेरीज़ लेआउट व्यूपोर्ट पढ़ते हैं, जो केवल सही है क्योंकि व्यूपोर्ट मेटा टैग इसे डिवाइस चौड़ाई पर पिन किया। min-width स्टैक के बीच एक भटकी हुई max-width क्वेरी ऐसा नियम है जो रहस्यपूर्ण तरीके से लागू होना बंद कर देता है, क्योंकि यह व्यवस्था को बढ़ाने के बजाय उससे लड़ रहा है।

Junoमीडिया क्वेरीज़ मीडिया क्वेरी CSS का एक ब्लॉक है जो केवल तब चलता है जब स्क्रीन एक शर्त को पूरा करता है, जैसे कि कम से कम 40rem चौड़ा होना। अपनी छोटी-स्क्रीन शैलियों को पहले सामान्य CSS के रूप में लिखें, फिर बड़ी स्क्रीन के लिए परिवर्तनों को जोड़ने के लिए @media (min-width: ...) का उपयोग करें। इस तरह फोन दृश्य आपका शुरुआती बिंदु है, पीछे की ओर पैच नहीं।
Junoमीडिया क्वेरीज़ मीडिया क्वेरीज़ केवल तभी नियमों को लागू करते हैं जब एक शर्त, आमतौर पर चौड़ाई, सत्य है। मोबाइल-पहला जाएं: सबसे छोटी स्क्रीन के लिए बिना क्वेरी आधार शैलियां, फिर min-width के साथ ऊपर की ओर परत करें ताकि हर क्वेरी केवल जोड़े। इसे दूसरे तरीके से max-width के साथ बनाएं और मोबाइल दृश्य टूटा हुआ अफ़ेरथॉट बनता है।
Junoमीडिया क्वेरीज़ मोबाइल-पहला मतलब है संकीर्ण लेआउट के लिए बिना शर्त आधार शैलियां और छोटे से बड़े तक स्टैक किए गए योगात्मक min-width क्वेरीज़, इसलिए CASCADE प्रत्येक ब्रेकपॉइंट को स्पष्ट रूप से हल करता है। शर्त में rem का उपयोग करें ताकि यह उपयोगकर्ता के फ़ॉन्ट आकार को ट्रैक करे, और याद रखें चौड़ाई क्वेरीज़ लेआउट व्यूपोर्ट पढ़ते हैं जो मेटा टैग पिन किया। एक अकेली max-width min-width स्टैक में क्लासिक कारण है कि एक नियम चुप्पी से लागू होना बंद कर देता है।

ब्रेकपॉइंट चुनना ​

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

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

css
/* ब्रेकपॉइंट चुना गया क्योंकि यहां पाठ बहुत चौड़ा हो गया, */
/* न कि क्योंकि एक फोन इस आकार का होता है */
@media (min-width: 45rem) {
  .article { max-width: 38rem; }
}

एक ब्रेकपॉइंट वह व्यूपोर्ट चौड़ाई है जहां आप लेआउट बदलते हैं। उन्हें अपनी सामग्री को देखकर चुनें, न कि डिवाइस नामों से मेल खाकर। "768px क्योंकि वह एक iPad है" जैसी गोल संख्याएं अधिकारीय महसूस करती हैं और जाल हैं: डिवाइस परिदृश्य लगातार बदलता है, और एक लेआउट जो पिछले साल के लोकप्रिय आकारों के लिए ट्यून किया गया था इस साल के पर टूट जाता है।

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

css
/* सामग्री-संचालित: यह पंक्ति ~75 वर्ण तक पहुंची और पढ़ना मुश्किल हो गया */
@media (min-width: 42rem) {
  .prose { max-width: 65ch; }   /* एक बार कमरा हो तो प्रकाश सीमित करें */
}

/* सामग्री-संचालित: साइडबार लेआउट केवल यहां अपने स्थान को अर्जित करता है */
@media (min-width: 60rem) {
  .page { grid-template-columns: 16rem 1fr; }
}

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

व्यवहार में इसका मतलब है जब तक लेआउट तनाव दिखता है तब तक फिर से आकार दें और वहां ब्रेकपॉइंट रखें, और इसका मतलब अधिकांश साइटों को केवल एक छोटी मुट्ठी की आवश्यकता होती है:

css
/* प्रकाश को सीमित करें जहां पंक्तियां पठनीय लंबाई को पार करती हैं, ~65 वर्ण */
@media (min-width: 42rem) {
  .prose { max-width: 65ch; }
}

/* साइडबार को केवल परिचय करें जहां मुख्य कॉलम चौड़ाई पूरी कर सकता है */
@media (min-width: 60rem) {
  .page { grid-template-columns: 16rem 1fr; }
}

उन्नत कदम प्रकार और रिक्ति के लिए clamp() पर झुकना है ताकि आपको बिल्कुल कम ब्रेकपॉइंट की आवश्यकता हो। clamp(min, preferred, max) एक मूल्य उठाता है जो व्यूपोर्ट के साथ स्केल करता है लेकिन दोनों सिरों पर सीमित है, इसलिए शीर्षकों और अंतराल प्रत्येक क्वेरी पर कूदने के बजाय सुचारू रूप से बढ़ते हैं:

css
h1 {
  /* कभी 1.75rem से नीचे नहीं, कभी 3rem से ऊपर नहीं, बीच में तरल */
  font-size: clamp(1.75rem, 4vw + 1rem, 3rem);
}

यह अधिकांश टाइपोग्राफिक स्केलिंग को बिल्कुल ब्रेकपॉइंट के बिना कवर करता है; आकार निर्धारण इकाइयों को देखें कि vw टर्म कैसे हल होता है और टाइपोग्राफी टाइप-स्केल पक्ष के लिए। तीन संबंधित उपकरण इसे गोल करते हैं। कंटेनर क्वेरीज़ एक घटक को व्यूपोर्ट के बजाय अपने स्वयं के कंटेनर की चौड़ाई से स्टाइल करते हैं, इसलिए एक कार्ड पूरे पेज के बजाय जिस कॉलम में बैठता है उसमें प्रतिक्रिया कर सकता है, जो व्यूपोर्ट-आधारित मीडिया क्वेरीज़ का घटक-आधारित संबंधी है। prefers-reduced-motion क्वेरी आपको उन पाठकों के लिए एनिमेशन को काट देने देता है जो अपने सिस्टम को इसे कम करने के लिए कहते हैं, और prefers-color-scheme आपको एक सिस्टम प्रकाश या अंधेरे वरीयता का सम्मान करने देता है, दोनों मीडिया क्वेरीज़ के रूप में लिखे गए:

css
@media (prefers-reduced-motion: reduce) {
  * { animation: none; transition: none; }  /* OS सेटिंग का सम्मान करें */
}

@media (prefers-color-scheme: dark) {
  body { background: #111; color: #eee; }
}

छवियों के लिए विशेष रूप से, प्रतिक्रियाशीलता HTML में चलती है: srcset विशेषता ब्राउज़र को प्रति स्क्रीन अनुपयुक्त आकार की फ़ाइल चुनने देती है, जो HTML प्रतिक्रियाशील छवियां अध्याय CSS के बजाय कवर करता है।

Junoब्रेकपॉइंट चुनना ब्रेकपॉइंट वह चौड़ाई है जहां आपका लेआउट बदलता है, और जाल किसी विशिष्ट फोन या टैबलेट से मेल खाना चुनना है। पीछा करने के लिए बहुत सारे डिवाइस आकार हैं, और वे हर साल बदलते हैं। अपने ब्राउज़र को धीरे-धीरे चौड़ा करें और लेआउट वास्तव में खराब दिखने लगता है जहां ब्रेकपॉइंट जोड़ें, चाहे कोई भी संख्या हो।
Junoब्रेकपॉइंट चुनना सामग्री को अपने ब्रेकपॉइंट चुनने दें, न कि डिवाइस नाम: एक पंक्ति बहुत लंबी हो जाती है या एक कार्ड बहुत तंग हो जाता है वह वास्तविक संकेत है, और 768px जैसी गोल डिवाइस चौड़ाई एक चलते लक्ष्य हैं जो सड़ते हैं। जब तक डिजाइन तनाव दिखता है तब तक फिर से आकार दें, और वहां ब्रेकपॉइंट रखें। अधिकांश साइटों को पूरी चीज़ में केवल दो या तीन की आवश्यकता होती है।
Junoब्रेकपॉइंट चुनना सामग्री-संचालित ब्रेकपॉइंट जीवित रहते हैं क्योंकि स्क्रीन जनसंख्या हर साल बदलती है, इसलिए डिवाइस आयामों के लिए कुंजीबद्ध कोई भी चीज़ अनुसूची पर सड़ता है। प्रकार और रिक्ति के लिए clamp() पर झुकें सभी में कम ब्रेकपॉइंट की जरूरत है, घटक-स्तर के बजाय व्यूपोर्ट-स्तर के स्टाइल के लिए कंटेनर क्वेरीज़ को ध्यान में रखें, और prefers-reduced-motion और prefers-color-scheme का सम्मान करें। छवियों के लिए, प्रतिक्रियाशीलता HTML srcset में है, CSS में नहीं।