मीडिया क्वेरी और मोबाइल-प्रथम विकास
min-width मीडिया क्वेरी से ब्रेकपॉइंट लिखें, पहले मोबाइल लेआउट बनाएँ और बड़ी स्क्रीन के लिए क्रमिक सुधार करें।
मीडिया क्वेरी और मोबाइल-प्रथम विकास, CoddyKit पर Frontend Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Frontend Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Frontend Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
Media Queries क्या हैं?
Media queries CSS rules को तभी लागू करती हैं जब कुछ conditions सही हों — जैसे viewport की चौड़ाई किसी threshold से अधिक हो। ये responsive design का आधार हैं और एक stylesheet को किसी भी screen size के अनुसार ढलने देती हैं।
मूल Syntax
एक media query CSS के block को @media rule में लपेटती है। अंदर के rules केवल condition के match होने पर लागू होते हैं।
@media (min-width: 768px) {
.container {
max-width: 1200px;
margin: 0 auto;
}
}min-width बनाम max-width
min-width: जब viewport कम-से-कम इतना चौड़ा हो, तब styles लागू करें (mobile-first)। max-width: जब viewport अधिकतम इतना चौड़ा हो, तब styles लागू करें (desktop-first)। Mobile-first development के लिए min-width को प्राथमिकता दें।
/* Mobile-first (preferred): */
@media (min-width: 768px) { /* tablets and up */ }
@media (min-width: 1024px) { /* desktops and up */ }
/* Desktop-first: */
@media (max-width: 767px) { /* phones only */ }Mobile-First Approach
पहले छोटी screens के लिए CSS लिखें (किसी भी media query के बाहर)। फिर बड़ी screens के लिए धीरे-धीरे complexity जोड़ने हेतु min-width media queries का उपयोग करें। इससे mobile users के लिए CSS छोटी और कुल मिलाकर code अधिक साफ़ रहता है।
.card {
/* Mobile defaults: single column */
padding: 16px;
font-size: 0.9rem;
}
@media (min-width: 768px) {
.card {
/* Tablet enhancement */
padding: 24px;
font-size: 1rem;
}
}सामान्य Breakpoints
Breakpoints का चुनाव specific devices के बजाय अपने content के आधार पर करें। लोकप्रिय शुरुआती points हैं: 480px (बड़े phones), 768px (tablets), 1024px (छोटे desktops), 1280px (बड़े desktops)। Specific device models को target करने वाले breakpoints से बचें।
मीडिया प्रकार
स्क्रीन की चौड़ाई के अलावा आप मीडिया प्रकारों को भी लक्षित कर सकते हैं: डिस्प्ले के लिए screen और प्रिंटर के लिए print। प्रिंट मीडिया क्वेरीज़ आपको यह अनुकूलित करने देती हैं कि पृष्ठ प्रिंट होने पर कैसा दिखे (नेविगेशन छिपाएँ, रंगों में बदलाव करें)।
@media print {
nav, footer, .ads {
display: none;
}
body {
font-size: 12pt;
color: black;
}
}and से शर्तों को मिलाना
and से शर्तों को जोड़ें: शैलियाँ तभी लागू करें जब दोनों शर्तें सही हों। अधिक जटिल तर्क के लिए not और or का उपयोग करें।
@media (min-width: 768px) and (max-width: 1023px) {
/* tablets only */
}
@media (orientation: landscape) and (max-width: 767px) {
/* landscape phones */
}पसंदीदा रंग-योजना
उपयोगकर्ता की OS की डार्क मोड पसंद के अनुसार प्रतिक्रिया दें। डिफ़ॉल्ट रूप से बिना किसी टॉगल के डार्क थीम उपलब्ध कराएँ।
@media (prefers-color-scheme: dark) {
body {
background: #1a202c;
color: #f7fafc;
}
}पसंदीदा कम-गतिशीलता
कम गति पसंद करने वाले उपयोगकर्ताओं का ध्यान रखें (वेस्टिब्युलर विकार, मिर्गी)। इस मीडिया क्वेरी के भीतर एनीमेशन बंद करें या उन्हें सरल बनाएँ।
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}कंटेनर क्वेरीज़ — भविष्य
कंटेनर क्वेरीज़ (@container) दृश्य क्षेत्र के बजाय पैरेंट कंटेनर के आकार के आधार पर शैलियाँ लागू करती हैं। ये वास्तव में घटक-स्तरीय अनुक्रियाशीलता संभव बनाती हैं और 2023 से सभी आधुनिक ब्राउज़रों में उपलब्ध हैं।
.card-container {
container-type: inline-size;
}
@container (min-width: 400px) {
.card { flex-direction: row; }
}RTL समर्थन के लिए तार्किक गुणधर्म
बाएँ-से-दाएँ और दाएँ-से-बाएँ, दोनों भाषाओं में काम करने वाले लेआउट के लिए margin-left के बजाय margin-inline-start जैसे तार्किक गुणधर्मों का उपयोग करें। अपने अनुक्रियाशील लेआउट को भविष्य के लिए टिकाऊ बनाएँ।
त्वरित जाँच
कौन-सा तरीका मोबाइल-प्रथम CSS रणनीति को सही ढंग से परिभाषित करता है?
पुनरावलोकन: मीडिया क्वेरीज़ और मोबाइल-प्रथम
मोबाइल-प्रथम क्रमिक सुधार के लिए @media (min-width: N) का उपयोग करें। क्वेरीज़ के बिना मोबाइल के लिए आधारभूत शैलियाँ लिखें। बड़ी स्क्रीन के लिए जटिलता जोड़ें। डार्क मोड के लिए prefers-color-scheme का उपयोग करें। पहुँच-सुलभता के लिए prefers-reduced-motion का उपयोग करें। घटक-स्तरीय अनुक्रियाशीलता के लिए कंटेनर क्वेरीज़ का उपयोग करें।
एआई शिक्षक के साथ HTML सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 41
- पाठ
- 163
अक्सर पूछे जाने वाले प्रश्न
क्या “मीडिया क्वेरी और मोबाइल-प्रथम विकास” पाठ निःशुल्क है?
हाँ—“मीडिया क्वेरी और मोबाइल-प्रथम विकास” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Frontend Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Frontend Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“मीडिया क्वेरी और मोबाइल-प्रथम विकास” में मैं क्या सीखूँगा?
min-width मीडिया क्वेरी से ब्रेकपॉइंट लिखें, पहले मोबाइल लेआउट बनाएँ और बड़ी स्क्रीन के लिए क्रमिक सुधार करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Frontend Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Frontend Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Frontend Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।
“मीडिया क्वेरी और मोबाइल-प्रथम विकास” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Frontend Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Frontend Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- व्यूपोर्ट मेटा टैग
- लेआउट के लिए Flexbox
- लेआउट के लिए CSS Grid
- मीडिया क्वेरी और मोबाइल-प्रथम विकास