HTML Responsive Design: हर स्क्रीन पर सही पेज
4 मिनट पढ़ें · मुफ़्त · बिना लॉगिन
Responsive design का मतलब है एक website जो हर screen पर अच्छी दिखे — phone, tablet, laptop, TV। आज आधे से ज़्यादा web traffic phone से आता है, इसलिए जो page सिर्फ desktop पर काम करती है, वह आधी visitor खो देती है।
पहला कदम: viewport tag
Head में <meta name="viewport" content="width=device-width, initial-scale=1.0"> जोड़ें। इसके बिना phone खुद को 980 pixels चौड़ा मानते हैं और आपकी page को सिकोड़कर fit करते हैं — सब कुछ छोटा हो जाता है।
दूसरा कदम: लचीली images
CSS में images को max-width: 100%; height: auto; रखें। Image तब सँकरी screen पर fit होने के लिए छोटी हो जाती है, बजाय इसके कि बाहर निकलकर sideways scroll करवाए। किसी image पर fixed pixel width कभी न रखें जिसे phone पर काम करना है।
तीसरा कदम: media queries
Media query CSS को सिर्फ तभी लागू करती है जब screen एक खास size की हो। जैसे: @media (max-width: 600px) { .sidebar { display: none; } } phone पर sidebar छिपा देता है, जहाँ उसके लिए जगह नहीं है। आप पहले desktop layout लिखते हैं, फिर queries जोड़ते हैं जो उसे छोटी screens के लिए बदलती हैं — या उल्टा, mobile-first से शुरू करते हैं।
असली phone पर जाँचें
Layout जाँचने के लिए browser की window छोटी करें, लेकिन page को असली phone पर भी खोलें। Touch targets (button, link) उँगली के लिए बड़े होने चाहिए — कम से कम 44 pixels ऊँचे — और text बिना pinch करके zoom किए पढ़ने लायक रहना चाहिए।
Responsive का मतलब क्या है
Responsive का मतलब है कि page उस screen के हिसाब से ढल जाती है जिस पर वह दिख रही है। एक ही page 27-inch monitor, laptop, tablet और छोटे phone पर पढ़ने लायक होनी चाहिए — visitor को zoom करने या sideways scroll करने की ज़रूरत नहीं पड़नी चाहिए। Layout खिंचता है, सिकुड़ता है और खुद को फिर से सजाता है, और images fit होने के लिए छोटी हो जाती हैं।
याद रखने की तरकीब: एक page, हर screen — यही है responsive का मतलब।
Syntax — viewport और media query
ज़्यादातर काम code के दो टुकड़े करते हैं। पहला, head में viewport tag। दूसरा, CSS में media query — एक rule जो सिर्फ तभी लागू होता है जब screen एक खास size की हो:
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img { max-width: 100%; height: auto; }
/* On screens narrower than 600px, stack the columns */
@media (max-width: 600px) {
.row { flex-direction: column; }
}
</style>
max-width: 100% rule images को अपने container से बाहर निकलने से रोकता है, और height: auto उन्हें shape से बाहर खिंचने से बचाता है।
आम गलतियाँ
- Viewport tag भूल जाना — इसके बिना phone desktop layout को सिकोड़कर छोटा दिखाते हैं।
- Containers पर fixed pixel width रखना, जैसे
width: 1200px— 360px वाले phone पर page बाहर निकल जाती है और sideways scroll होती है। - Fixed width वाली बड़ी image इस्तेमाल करना —
max-width: 100%इस्तेमाल करें ताकि वह छोटी हो सके। - सिर्फ desktop पर test करना — browser की window छोटी करें, और publish करने से पहले page को असली phone पर जाँचें।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<title>Responsive</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
img { max-width: 100%; height: auto; }
@media (max-width: 600px) {
.sidebar { display: none; }
}
</style>
</head>
<body>
<h1>Responsive Page</h1>
<img src="photo.jpg" alt="A photo that shrinks on small screens">
<div class="sidebar">Sidebar — hidden on phones.</div>
</body>
</html>परिणाम
खुद करके देखें — लाइव एडिटर
नीचे दिया गया कोड बदलें और चलाएँ दबाएँ — परिणाम तुरंत दिखेगा। कोई फाइल सहेजनी नहीं है, कोई लॉगिन नहीं चाहिए।
संबंधित पाठ
अक्सर पूछे जाने वाले सवाल
इस पाठ के बारे में सबसे ज़्यादा पूछे जाने वाले सवाल — सवाल पढ़ें, फिर खोलकर जवाब देखें।
1. रेस्पॉन्सिव डिज़ाइन का क्या अर्थ है?
एक ही वेबसाइट हर स्क्रीन पर अच्छी दिखे, चाहे फ़ोन हो, टैबलेट हो या लैपटॉप, बिना ज़ूम किए और बिना बगल में स्क्रॉल किए।
2. रेस्पॉन्सिव पेज में व्यूपोर्ट टैग क्यों ज़रूरी है?
इसके बिना फ़ोन पेज को सिकोड़कर दिखाता है, जिससे सब कुछ बहुत छोटा और पढ़ने लायक नहीं रहता।
3. मीडिया क्वेरी किस काम आती है?
यह सीएसएस तभी लगाती है जब स्क्रीन किसी ख़ास आकार की हो, जैसे छोटी स्क्रीन पर साइडबार छिपाना।
खुद क्यों सीखें — AI से पूछने के बजाय?
AI आपके लिए कोड लिख सकता है, लेकिन वह आपके लिए सोच नहीं सकता। जब आप HTML खुद सीखते हैं, तो आपका दिमाग असली कौशल बनाता है: आप समझते हैं कि पेज ऐसा क्यों दिखता है, टूटने पर उसे ठीक कर सकते हैं, और परीक्षा या इंटरव्यू में बिना मदद के जवाब दे सकते हैं। यही कौशल नौकरी दिलाता है — कॉपी किया हुआ जवाब नहीं।
सर्टिफिकेट पाएँ — सिर्फ ₹10
सभी 35 पाठ पूरे करें, टेस्ट पास करें (80%), ₹10 दें और अपना सर्टिफिकेट पाएँ।
टेस्ट देंदेखकर सीखना पसंद है? वीडियो कोर्स में वही विषय एक-एक करके सिखाए जाते हैं।
Go further with a full course
Free tutorials teach you the basics. Our paid courses add live projects, mentorship and a certificate.
Browse all courses
