CSS रिस्पॉन्सिव डिज़ाइन
Flex responsive और Grid responsive ने breakpoint पर layout tricks दिखाए। Responsive design बड़ी तस्वीर है: एक साइट जो phone, tablet और चौड़े monitor पर पढ़ने योग्य रहे — दो HTML कॉपी बिना। यह पाठ आदतें बनाता है; media queries, breakpoints और responsive images बाद में गहरे होते हैं।
Responsive design toolkit
📊 Responsive design एक नज़र में
| टुकड़ा | रोज़ का काम |
|---|---|
| Viewport meta | Mobile browser को device width बताता है, नकली desktop column नहीं |
| Fluid container | width: 100% + max-width + side padding — पढ़ने योग्य line length |
Relative units (rem, %, em) |
Typography और spacing settings के साथ scale |
| Flexible images | max-width: 100% ताकि media संकीर्ण screen पर overflow न करे |
| एक HTML tree | वही landmarks; CSS layout shift लाता है |
| Media queries (अगला पाठ) | Viewport match होने पर rules बदलें |
Fixed-width pages जो phone पर zoom या horizontal scroll कराती हैं,user को परेशान करती हैं। Responsive design किसी भी width को स्वीकार करता है और spacing, columns, type शांति से adjust करता है — Flex/Grid patterns से जो आपने अभ्यास किए।
Viewport meta — mobile को hint चाहिए
<meta name="viewport" content="width=device-width, initial-scale=1"> के बिना कई phones desktop-width canvas render करके छोटा करते हैं। <head> में एक बार, फिर CSS।
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My page</title>
Mobile-first vs desktop-first
Mobile-first संकीर्ण screen के base styles लिखता है, फिर बड़े viewport पर min-width queries। Desktop-first चौड़े से शुरू कर max-width से tight — जैसे Flex/Grid responsive। दोनों OK अगर एक समय एक layer बदलें; project पर एक habit चुनें।
body {
margin: 0;
font-family: system-ui, sans-serif;
line-height: 1.5;
font-size: 1rem;
padding: 1rem;
}
/* Media Queries पाठ यहाँ min-width rules जोड़ेगा */
Fluid centered container
पूरी width के साथ max-width cap और horizontal padding — content edge न छुए। Columns के लिए Flex/Grid चुनने से पहले यह pattern काम करता है।
.page-wrap {
width: 100%;
max-width: 72rem;
margin: 0 auto;
padding: 0 1rem;
box-sizing: border-box;
}
Type और spacing के relative units
rem root font size से जुड़ता है — headings और gaps के लिए अच्छा। % parent के अंदर width। हर चीज़ px में fix न करें जब relative scale zoom पर शांत रखे।
:root {
font-size: 100%;
}
h1 {
font-size: 1.75rem;
margin: 0 0 0.75rem;
}
.lead {
font-size: 1.125rem;
max-width: 40rem;
}
Flexible images और media
Viewport से चौड़े bitmap horizontal scroll लाते हैं। सरल guard: display: block, max-width: 100%, height: auto।
img,
video {
display: block;
max-width: 100%;
height: auto;
}
शांत responsive habit
एक HTML tree। Viewport meta जगह पर। पहले fluid container + relative units। Columns reflow हों तो Flex/Grid responsive — दूसरी «mobile-only» site नहीं। Breakpoint plan लिखें; Media Queries syntax बताएगा।
खुद try करें
- Sample page पर viewport meta confirm करें।
- Content fluid container में
max-widthऔर padding के साथ। - Body
remमें और browser zoom test। - Gallery पर flexible image rule।
- एक layout जिसे अभी media query चाहिए — अगले पाठ के लिए रखें।
आम गलतियाँ
- हर wrapper पर fixed px width
- एक tree पर responsive CSS की जगह अलग m.example.com
- Viewport meta भूलना — mobile «zoomed out» लगे
max-width: 100%के बिना बड़ी images- सोचना यह intro media queries, breakpoints, responsive images की जगह है
सारांश
- Responsive design एक HTML को viewport sizes पर adapt करता है
- Viewport meta + fluid container + relative units = foundation
- Mobile-first/desktop-first शुरुआत; media queries shifts लागू करते हैं
- Flex/Grid responsive इस mindset के tools
- अगला: Media Queries
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी