CSS Responsive Design
In this page:
@media (max-width: length) {
selector {
property: value;
}
}Mobile-First Workflow
Mobile-first design industry standard workflow है। आप पहले छोटे mobile screens के लिए अपनी default styles लिखते हैं, फिर screen sizes बढ़ने पर layout columns और spacing जोड़ने के लिए min-width queries इस्तेमाल करते हैं।
उदाहरण: The Mobile-First Workflow
<style>
.box {
background: lightblue;
}
@media (min-width: 768px) {
.box {
background: lightgreen;
}
}
</style>
<div class="box">Mobile-first: default style, then a min-width override</div>Fluid Container Layout Structures
Container widths को fixed pixels में define करने के बजाय (जो छोटे mobile screens पर overflow हो सकता है), fluid layouts relative percentage values इस्तेमाल करते हैं। यह आपके columns और boxes को किसी भी screen size में fit होने के लिए dynamically shrink और expand करने देता है।
उदाहरण: Fluid Container Layout structures
<style>
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
background: lightblue;
padding: 10px;
}
</style>
<div class="container">Fluid container</div>Scalable Responsive Media Images
बड़ी images display के side से बाहर चलकर mobile screens पर आसानी से आपका page layout तोड़ सकती हैं। CSS इस्तेमाल करके relative widths और height controls लागू करके, आप अपनी images को किसी भी device size में fit होने के लिए automatically scale down करा सकते हैं।
- अपनी images को साफ़ तरीके से scale और proportional बनाए रखने के लिए style rules max-width: 100% और height: auto इस्तेमाल करें।
- Accepted values:
- max-width: 100% — parent से कभी wider नहीं
- height: auto — aspect ratio बनाए रखता है
- display: block — inline gap हटाता है
- width: 100% — हमेशा parent भरता है
उदाहरण: Scalable Responsive Media Images
<style>
img {
max-width: 100%;
height: auto;
}
</style>
<img src="https://placehold.co/600x300" alt="Responsive image">Fluid Typography (rem और em)
Fixed pixel font sizes (जैसे font-size: 16px) अलग-अलग screens में adjust नहीं होते, जो text को पढ़ना मुश्किल बना सकता है। relative CSS units (जैसे em, rem, या viewport units) इस्तेमाल करना आपकी text sizes को user के browser या screen dimensions के relative dynamically scale होने देता है।
उदाहरण: Fluid typography (rem and em)
<style>
h1 {
font-size: 2rem;
}
p {
font-size: 1em;
}
</style>
<h1>Scales with root font size</h1>
<p>Scales with parent font size</p>Responsive Navigation Menus
Desktops के लिए design किए गए navigation bars space limits की वजह से mobile screens पर आसानी से टूट सकते हैं। एक responsive menu बनाने के लिए, media queries इस्तेमाल करें ताकि छोटे screens पर आपके navigation links vertically stack हों या एक interactive toggle button के पीछे छुपें।
उदाहरण: Responsive Navigation Menus
<style>
.nav {
display: flex;
background: #eef;
padding: 10px;
gap: 10px;
}
@media (max-width: 600px) {
.nav {
flex-direction: column;
}
}
</style>
<nav class="nav">
<a href="#">Home</a>
<a href="#">About</a>
</nav>- अपने head section के अंदर viewport meta tag शामिल करना भूल जाना, जो mobile layout rendering तोड़ देता है।
- container elements पर hard-coded, fixed pixel widths set करना, layout cutoff और horizontal scrolling issues की ओर ले जाते हुए।
- images पर responsive scaling settings को नज़रअंदाज़ करना, जिससे वे अपने containers से overflow हो जाती हैं।
- Responsive design सुनिश्चित करता है कि आपके webpages सभी sizes की screens पर automatically खूबसूरत दिखने के लिए adapt हों।
- पहले छोटे mobile screens के लिए अपनी default styles लिखें, फिर अपने layouts को scale up करने के लिए min-width queries इस्तेमाल करें।
- layout breaks रोकने के लिए fluid percentages, relative font units (rem), और responsive image configurations इस्तेमाल करें।
Modern responsive design attributes, media queries, और relative units हर web browser द्वारा natively supported हैं।
Chapter Quiz — Complete all 8 topics to unlock
0/8 topics done
Complete these topics first: