CSS RWD Introduction
In this page:
selector {
property: value;
}
@media (max-width: length) {
selector {
property: value;
}
}Responsive Design क्या Solve करता है
Responsive design से पहले, sites या तो एक अलग mobile version बनाती थीं या phone users को किसी desktop layout को pinch-zoom करने पर मजबूर करती थीं। इसके बजाय Responsive design एक ही HTML/CSS codebase ship करता है जो जिस भी viewport पर पहुँचे उसे fit करने के लिए खुद reflow हो जाता है, एक fixed pixel-perfect layout के बजाय relative sizing और conditional rules इस्तेमाल करते हुए।
उदाहरण: What Responsive Design Solves
<style>
.page {
width: 100%;
background: lightblue;
padding: 10px;
}
</style>
<div class="page">One codebase reflows to fit any viewport</div>Pillar One: Fluid Layouts
Fluid layouts containers को fixed pixel widths के बजाय percentages, fr units, या flex/grid ratios से size करते हैं, इसलिए अपने parent का 50% वाला एक column 50% ही रहता है चाहे parent 320px wide हो या 1920px। यह वह structural foundation है जिस पर RWD में बाकी सब कुछ बना है।
उदाहरण: Pillar One: Fluid Layouts
<style>
.column {
width: 50%;
background: lightblue;
padding: 10px;
}
</style>
<div class="column">Always 50% of its parent, at any screen width</div>Pillar Two: Flexible Media
Images और video को अपने खुद के rule की ज़रूरत होती है क्योंकि एक 1200px-wide photo अपने आप shrink नहीं होती -- max-width: 100% और height: auto set करना media को बिना कभी overflow या aspect ratio distort किए किसी fluid container के अंदर scale down होने देता है।
उदाहरण: Pillar Two: Flexible Media
<style>
img {
max-width: 100%;
height: auto;
}
</style>
<img src="https://placehold.co/1200x600" alt="Scales down without overflowing">Pillar Three: Media Queries
Media queries आपको viewport width (या दूसरे features) के आधार पर conditionally CSS लागू करने देते हैं, इसलिए आप navigation, font sizes, या column counts को specific breakpoints पर restructure कर सकते हैं, सिर्फ fluid sizing पर हर layout change handle करने के लिए निर्भर रहने के बजाय।
उदाहरण: Pillar Three: Media Queries
<style>
.nav {
font-size: 14px;
}
@media (min-width: 768px) {
.nav {
font-size: 18px;
}
}
</style>
<nav class="nav">Responsive nav text size</nav>तीनों Pillars कैसे Combine होते हैं
एक असली responsive page शायद ही कभी सिर्फ एक pillar इस्तेमाल करता है -- एक typical layout default रूप से fluid है, हर जगह flexible media इस्तेमाल करता है, और सिर्फ उन मुट्ठी भर points पर एक media query डालता है जहाँ अकेला fluid approach एक awkward layout produce करता है, जैसे किसी horizontal nav को stacked में बदलना।
उदाहरण: How the Three Pillars Combine
<style>
.container {
width: 90%;
background: #eef;
padding: 10px;
}
img {
max-width: 100%;
}
@media (min-width: 768px) {
.container {
width: 70%;
}
}
</style>
<div class="container">
<img src="https://placehold.co/600x300" alt="Fluid width, flexible media, and a media query together">
</div>- viewport meta tag भूल जाना, इसलिए mobile browsers एक zoomed out desktop page दिखाते हैं।
- fixed pixel widths इस्तेमाल करना, इसलिए छोटे screens पर page को horizontal scrolling चाहिए होती है।
- सिर्फ desktop के लिए design करना और सिर्फ वहीं test करना।
हर modern browser में supported: Chrome, Firefox, Safari, Edge और Opera।
Chapter Quiz — Complete all 8 topics to unlock
0/8 topics done
Complete these topics first: