HTML Responsive
In this page:
<meta name="viewport" content="width=device-width, initial-scale=1.0">Viewport Meta Tag
Mobile browsers बड़े desktop layouts को छोटी screens पर फिट करने के लिए अपने-आप zoom out कर देते हैं, जिससे text बहुत छोटा और पढ़ने में मुश्किल हो जाता है।
viewport meta tag mobile devices को page layout को device के native scale पर render करने का निर्देश देता है, जिससे पढ़ने का size आरामदायक बना रहता है।
- आप जो भी webpage design करें, उसके head section में हमेशा viewport meta tag शामिल करें।
- Accepted attributes:
- name — viewport
- content — width=device-width | initial-scale=1 | minimum-scale | maximum-scale | user-scalable=yes|no
उदाहरण: The Viewport Meta Tag
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>Fluid Container Widths
container widths को fixed pixels में define करने के बजाय (जो छोटी mobile screens पर overflow हो सकती हैं), fluid layouts relative percentage values इस्तेमाल करते हैं। इससे आपके columns और boxes किसी भी screen size में फिट होने के लिए dynamically shrink और expand हो सकते हैं।
उदाहरण: Fluid Container Widths
<div style="width: 80%; max-width: 1000px;">
Fluid container
</div>Scalable Responsive Images
बड़ी images mobile screens पर display के किनारे से बाहर निकलकर आसानी से आपका page layout बिगाड़ सकती हैं। CSS का इस्तेमाल करके relative widths और height controls लगाने से, आप अपनी images को किसी भी device size में फिट होने के लिए अपने-आप scale down करा सकते हैं।
उदाहरण: Scalable Responsive Images
<img src="photo.jpg" style="max-width: 100%; height: auto;" alt="Photo">Fluid Relative Typography
Fixed pixel font sizes (जैसे font-size: 16px) अलग-अलग screens के हिसाब से adjust नहीं होते, जिससे text पढ़ना मुश्किल हो सकता है।
Relative CSS units (जैसे em, rem, या vw) इस्तेमाल करने से आपके text sizes user के browser या screen dimensions के सापेक्ष dynamically scale हो पाते हैं।
उदाहरण: Fluid Relative Typography
<p style="font-size: 1rem;">Text that scales with the root font size</p>CSS Media Queries का परिचय
HTML आपके content को structure करता है, लेकिन पूरी तरह responsive designs बनाने के लिए CSS media queries ही असली काम करते हैं। ये आपके कोड में conditional statements की तरह काम करते हैं, जिससे आप user की screen width के आधार पर खास layout rules लागू कर पाते हैं।
उदाहरण: Introduction to CSS Media Queries
<style>
@media (max-width: 600px) {
body {
font-size: 14px;
}
}
</style>CSS Breakpoints समझना
एक breakpoint एक खास screen width होती है जहाँ आपका layout उपलब्ध space में बेहतर फिट होने के लिए बदल जाता है, जिसे एक media query से define किया जाता है।
आम breakpoints लगभग phone, tablet, और desktop sizes को target करते हैं, हालांकि सही numbers इस बात पर आधारित होने चाहिए कि आपका खुद का design असल में कहाँ बिगड़ना शुरू होता है, किसी मनमाने device width पर नहीं।
उदाहरण: CSS Breakpoints Explained
<style>
@media (min-width: 768px) {
.container {
width: 750px;
}
}
</style>
<div class="container">Resize the viewport to see the width change at 768px</div>Responsive Tables Technique
कई columns वाली चौड़ी tables को mobile-friendly बनाना सबसे मुश्किल कामों में से एक है, क्योंकि हर column को छोटा करने से text पढ़ने लायक नहीं रह जाता।
एक आम technique यह है कि table को एक scrollable container में wrap कर दिया जाए ताकि users साइड में swipe कर सकें, या CSS का इस्तेमाल करके छोटी screens पर हर row को card layout में restack किया जाए।
उदाहरण: Responsive Tables Technique
<div style="overflow-x: auto;">
<table>
<tr><td>Wide table content</td></tr>
</table>
</div>Mobile-First Approach
Mobile-first का मतलब है पहले अपना base CSS छोटी screens के लिए लिखना, और फिर उल्टा करने के बजाय, screen बड़ी होने पर complexity जोड़ने के लिए min-width media queries इस्तेमाल करना।
यह approach आमतौर पर सरल, तेज़ी से load होने वाला CSS बनाता है, क्योंकि phones — सबसे सीमित devices — बिना किसी overrides के वही styles पाते हैं जो सबसे ज़रूरी हैं।
उदाहरण: Mobile-First Approach
<style>
.box { width: 100%; }
@media (min-width: 768px) {
.box { width: 50%; }
}
</style>
<div class="box">Full width on mobile, half width from 768px up</div>Chapter Quiz — Complete all 12 topics to unlock
0/12 topics done
Complete these topics first: