रिस्पॉन्सिव डिज़ाइन और डार्क मोड
मोबाइल-फ़र्स्ट ब्रेकपॉइंट से किसी भी स्क्रीन के अनुसार ढलने वाले लेआउट बनाएँ और CSS चर तथा Tailwind का उपयोग करके परिष्कृत, उपयोगकर्ता-अनुकूल डार्क मोड जोड़ें।
रिस्पॉन्सिव डिज़ाइन और डार्क मोड, CoddyKit पर Next.js 15 पूर्ण-स्टैक वेब ऐप का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Next.js 15 पूर्ण-स्टैक वेब ऐप सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Next.js 15 पूर्ण-स्टैक वेब ऐप पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
मोबाइल-प्रथम सोच
Responsive design का अर्थ है ऐसा एक लेआउट जो फ़ोन, टैबलेट और डेस्कटॉप के अनुसार ढल जाए। आधुनिक तरीका mobile-first है: पहले छोटी स्क्रीन के लिए शैली तय करें, फिर बड़ी स्क्रीन के लिए सुधार जोड़ें।
मीडिया क्वेरी
CSS का @media नियम किसी चौड़ाई से ऊपर या नीचे ही शैलियाँ लागू करता है। मोबाइल-प्रथम डिज़ाइन में min-width ब्रेकपॉइंट का उपयोग होता है।
.grid { display: block; }
@media (min-width: 768px) {
.grid { display: grid; grid-template-columns: 1fr 1fr; }
}लचीली इकाइयाँ
सापेक्ष इकाइयों को प्राथमिकता दें, ताकि लेआउट स्वाभाविक रूप से आकार बदल सके:
- स्पेसिंग और फ़ॉन्ट आकार के लिए
rem - चौड़ाई के लिए
%औरfr - लचीले टाइपोग्राफ़ी आकार के लिए
clamp()
h1 { font-size: clamp(1.5rem, 4vw, 3rem); }Tailwind ब्रेकपॉइंट
Tailwind sm:, md:, lg: जैसे प्रीफ़िक्स के साथ इनलाइन प्रतिक्रियाशीलता देता है। बिना प्रीफ़िक्स वाली क्लासें मोबाइल का आधार होती हैं।
<div class="block md:grid md:grid-cols-2 lg:grid-cols-3">Flexbox और Grid
दो लेआउट इंजन लगभग हर आवश्यकता को पूरा करते हैं:
- एक-आयामी पंक्तियों या स्तंभों के लिए Flexbox
- दो-आयामी लेआउट के लिए Grid
इनका संयोजन करें और ब्रेकपॉइंट के अनुसार सामग्री को नए क्रम में व्यवस्थित होने दें।
डार्क मोड क्या है
Dark mode आँखों पर दबाव कम करने और OLED स्क्रीन पर बैटरी बचाने के लिए हल्के रंगों की जगह गहरे रंगों का उपयोग करता है। अच्छा कार्यान्वयन उपयोगकर्ता की सिस्टम पसंद का सम्मान करता है और उसे इसे बदलने की सुविधा भी देता है।
सिस्टम पसंद
CSS मीडिया सुविधा prefers-color-scheme OS की थीम पहचानती है, ताकि डिफ़ॉल्ट रूप से उपयोगकर्ता की चुनी हुई थीम लागू की जा सके।
@media (prefers-color-scheme: dark) {
body { background: #111; color: #eee; }
}थीम के लिए CSS चर
रूट पर रंगों को CSS custom properties के रूप में परिभाषित करें, फिर डार्क मोड के लिए उन्हें बदलें। घटक इन चरों का संदर्भ लेते हैं, इसलिए एक ही स्विच से पूरा ऐप नए रंगों में दिखने लगता है।
:root { --bg: #fff; --fg: #111; }
[data-theme='dark'] { --bg: #111; --fg: #eee; }
body { background: var(--bg); color: var(--fg); }Tailwind डार्क वैरिएंट
Tailwind में dark: वैरिएंट पहले से उपलब्ध है। html तत्व पर dark क्लास टॉगल करें और डार्क यूटिलिटी सक्रिय हो जाएँगी।
<div class="bg-white text-black dark:bg-gray-900 dark:text-white">पसंद को सहेजना
उपयोगकर्ता की पसंद को localStorage में सहेजें और गलत थीम की झलक से बचने के लिए पेंट होने से पहले उसे लागू करें। next-themes जैसी लाइब्रेरी Next.js में यह काम आसानी से संभालती हैं।
const theme = localStorage.getItem('theme') || 'system';
document.documentElement.dataset.theme = theme;सुलभता और कंट्रास्ट
थीम चाहे जो हो, पाठ को पढ़ने योग्य रखें। WCAG के अनुसार मुख्य पाठ के लिए कम-से-कम 4.5:1 का कंट्रास्ट अनुपात रखें। दोनों थीम की जाँच करें; सफ़ेद पृष्ठभूमि पर काम करने वाला रंग गहरे पृष्ठभूमि पर विफल हो सकता है।
त्वरित जाँच
प्रतिक्रियाशीलता और थीमिंग संबंधी अपने ज्ञान की जाँच करें।
पुनरावलोकन
आपने अनुकूलनशील शैली बनाना सीखा:
- Mobile-first मीडिया क्वेरी और लचीली इकाइयाँ लेआउट को अनुकूल बनाती हैं
- Tailwind के
md:/lg:प्रीफ़िक्स ब्रेकपॉइंट को इनलाइन बनाते हैं - CSS variables और
prefers-color-schemeडार्क मोड को संचालित करते हैं - पसंद को सहेजें और दोनों थीम में contrast को सुलभ बनाए रखें
एआई शिक्षक के साथ TypeScript सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 12
- पाठ
- 48
अक्सर पूछे जाने वाले प्रश्न
क्या “रिस्पॉन्सिव डिज़ाइन और डार्क मोड” पाठ निःशुल्क है?
हाँ — Next.js 15 पूर्ण-स्टैक वेब ऐप अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “रिस्पॉन्सिव डिज़ाइन और डार्क मोड” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Next.js 15 पूर्ण-स्टैक वेब ऐप पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“रिस्पॉन्सिव डिज़ाइन और डार्क मोड” में मैं क्या सीखूँगा?
मोबाइल-फ़र्स्ट ब्रेकपॉइंट से किसी भी स्क्रीन के अनुसार ढलने वाले लेआउट बनाएँ और CSS चर तथा Tailwind का उपयोग करके परिष्कृत, उपयोगकर्ता-अनुकूल डार्क मोड जोड़ें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Next.js 15 पूर्ण-स्टैक वेब ऐप का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Next.js 15 पूर्ण-स्टैक वेब ऐप शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Next.js 15 पूर्ण-स्टैक वेब ऐप शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।
“रिस्पॉन्सिव डिज़ाइन और डार्क मोड” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Next.js 15 पूर्ण-स्टैक वेब ऐप पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Next.js 15 पूर्ण-स्टैक वेब ऐप पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- CSS मॉड्यूल और ग्लोबल स्टाइल
- Tailwind CSS का एकीकरण
- कंपोनेंट लाइब्रेरी और थीमिंग
- रिस्पॉन्सिव डिज़ाइन और डार्क मोड