लोड हो रहा है...

HTML रेस्पॉन्सिव

लेआउट के बाद रेस्पॉन्सिव: वही URL फ़ोन और डेस्कटॉप पर। HTML viewport से शुरू; CSS पूरा करता है।

एक URL, कई चौड़ाई

अलग मोबाइल HTML नहीं। 1200px आदत क्षैतिज स्क्रॉल लाती है।

सीधा उत्तर

1) viewport मेटा। 2) द्रव चौड़ाई। 3) img max-width:100%। media queries CSS विषय हैं।

📊 HTML unlocks vs CSS responsive tools

Layer	Job for responsiveness	Examples
HTML viewport	Tell mobile browsers how to size the layout viewport	meta name="viewport" with width=device-width
HTML structure	Keep landmarks and flexible wrappers that can reflow	header, main, aside, div.row (from layout)
CSS fluid sizing	Let boxes and images shrink instead of overflow	max-width, %, height: auto
CSS adaptation	Change columns and spacing at breakpoints	media queries, flex/grid tweaks (CSS courses)
Avoid	Huge fixed pixels and layout tables fighting narrow screens	width="1200", whole-page table chrome

viewport मेटा — आवश्यक HTML टुकड़ा

बिना इसके कई फ़ोन डेस्कटॉप कैनवस सिकोड़ते हैं — टेक्स्ट छोटा लगता है।

Viewport meta in head

html

HTML Code

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive demo</title>
</head>

viewport पंक्ति पढ़ें

name=viewport स्विच है
width=device-width डिवाइस चौड़ाई
initial-scale=1.0 = 100%
CSS अभी भी चाहिए

द्रव छवियाँ — HTML मार्क + CSS स्केल

img और alt; स्केल CSS।

Fluid images helper

html

HTML Code

<style>
img { max-width: 100%; height: auto; }
</style>
<img src="images/wide.jpg" alt="Wide landscape photo">

द्रव नियम पढ़ें

max-width:100%
height:auto अनुपात रखता है
width=1200 फ़ोन पर overflow

HTML खोलता है; CSS पूरा करता है

viewport और लचीली संरचना HTML। द्रव कॉलम और breakpoints CSS।

अभ्यास — रीसाइज़ लैब

viewport जोड़ें
चौड़ी छवि + द्रव CSS
विंडो संकरी करें
थोड़ी देर width=1200 आज़माएँ

आसान गलतियाँ

viewport भूलना
स्थिर 1200px मीडिया
केवल HTML पर्याप्त मिथक
लेआउट टेबल

सार

viewport आवश्यक
द्रव छवियाँ मदद
HTML + CSS
अगला: फ़ॉर्म

🧠 अपने ज्ञान की परीक्षा करें

शुरू करने के लिए तैयार

अपने ज्ञान की परीक्षा करें

इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं

❓

प्रश्न

🎯

70%

पास करने के लिए

♾️

∞

समय

🔄

∞

प्रयास

📝 निर्देश

हर प्रश्न को ध्यान से पढ़ें
हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
आपकी प्रगति शीर्ष पर दिखाई जाएगी

भाषा