CSS Academy · पाठ

Viewport Units: vw, vh, dvh

vw, vh और आधुनिक dvh units से तत्वों का आकार browser viewport के सापेक्ष निर्धारित कीजिए।

पाठ 3, कुल 4 में से13 चरण

Viewport Units: vw, vh, dvh, CoddyKit पर CSS Academy का एक निःशुल्क पाठ है। यह 4 में से 3वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह CSS Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

व्यूपोर्ट इकाइयाँ क्या होती हैं

व्यूपोर्ट इकाइयाँ ब्राउज़र व्यूपोर्ट के आकार (ब्राउज़र विंडो के दिखाई देने वाले क्षेत्र) के सापेक्ष होती हैं। ये उपलब्ध स्क्रीन स्थान के अनुसार बदलने वाले लेआउट और टाइपोग्राफी बनाने में सक्षम बनाती हैं।

vw — व्यूपोर्ट की चौड़ाई

1vw = व्यूपोर्ट की चौड़ाई का 1%। 100vw पूरे व्यूपोर्ट की चौड़ाई भरता है। यह प्रतिशत से जुड़ी जटिलताओं के बिना पूरी चौड़ाई वाले एलिमेंट के लिए उपयोगी है।

<div class="hero"></div>

vh — व्यूपोर्ट की ऊँचाई

1vh = व्यूपोर्ट की ऊँचाई का 1%। 100vh पूरे व्यूपोर्ट की ऊँचाई भरता है। यह पूरी स्क्रीन वाले हीरो सेक्शन और मोडल के लिए पारंपरिक रूप से उपयोगी है।

<div class="fullscreen">100vh fills the viewport height</div>

मोबाइल 100vh की समस्या

मोबाइल ब्राउज़र में स्क्रॉल करने पर ब्राउज़र इंटरफ़ेस (एड्रेस बार) दिखाई देने या छिपने के साथ व्यूपोर्ट की ऊँचाई बदलती रहती है। 100vh में ब्राउज़र इंटरफ़ेस कभी शामिल हो सकता है और कभी बाहर रह सकता है, जिससे सामग्री का कुछ भाग छिप सकता है।

dvh — डायनेमिक व्यूपोर्ट ऊँचाई

dvh (डायनेमिक व्यूपोर्ट ऊँचाई) ब्राउज़र इंटरफ़ेस के समायोजित होने के बाद दिखाई देने वाली वास्तविक ऊँचाई को दर्शाने के लिए अपने-आप बदलती रहती है। यह मोबाइल 100vh की समस्या का समाधान करती है।

<div class="mobile-hero">Dynamic viewport height (100dvh)</div>

svh और lvh

CSS svh भी प्रदान करता है (छोटे व्यूपोर्ट की ऊँचाई — ब्राउज़र इंटरफ़ेस को हमेशा बाहर रखती है) और lvh (बड़े व्यूपोर्ट की ऊँचाई — मानो इंटरफ़ेस छिपा हो)। ये मोबाइल व्यूपोर्ट के व्यवहार पर सूक्ष्म नियंत्रण देते हैं।

vw के साथ लचीली टाइपोग्राफी

font-size के लिए vw का उपयोग करने से ऐसा टेक्स्ट बनता है जो स्क्रीन के साथ बदलता है:

<h1>Fluid Heading</h1>

व्यूपोर्ट-चौड़ाई की सीमाएँ

100vw में डेस्कटॉप पर स्क्रॉलबार की चौड़ाई भी शामिल होती है। लापरवाही से उपयोग करने पर इससे क्षैतिज ओवरफ़्लो हो सकता है। ब्लॉक एलिमेंट पर width: 100% को प्राथमिकता दें और vw को विशिष्ट मामलों के लिए रखें।

vmin और vmax

1vmin = व्यूपोर्ट के छोटे आयाम (चौड़ाई या ऊँचाई) का 1%। 1vmax = बड़े आयाम का 1%। ये ऐसे वर्गाकार कंटेनर के लिए उपयोगी हैं जो ओरिएंटेशन बदलने पर अनुकूलित हो जाते हैं।

<div class="square"></div>

svw, lvw, dvw — चौड़ाई के रूपांतर

ऊँचाई के रूपांतरों की तरह CSS चौड़ाई के लिए svw, lvw और dvw भी प्रदान करता है। डायनेमिक रूपांतर (dvw, dvh) मोबाइल पर सबसे अधिक उपयोगी होते हैं।

व्यावहारिक पैटर्न

व्यूपोर्ट इकाइयों के सामान्य पैटर्न:

min-height: 100dvh — मोबाइल के लिए सुरक्षित पूर्ण-स्क्रीन सेक्शन
height: 100svh — स्थिर UI पैनल
font-size: clamp(1rem, 2.5vw, 2rem) — लचीले शीर्षक
width: min(800px, 90vw) — सुरक्षित-चौड़ाई वाले कंटेनर

त्वरित जाँच

पूर्ण-स्क्रीन मोबाइल सेक्शन के लिए dvh को vh की तुलना में प्राथमिकता क्यों दी जाती है?

इंटरैक्टिव पाठ में इसका उत्तर दें

सारांश

vw और vh व्यूपोर्ट की चौड़ाई और ऊँचाई के 1% होते हैं। मोबाइल पर ब्राउज़र इंटरफ़ेस के कारण vh अविश्वसनीय होती है। डायनेमिक और मोबाइल पर सटीक पूर्ण-स्क्रीन लेआउट के लिए dvh का उपयोग करें। vmin और vmax व्यूपोर्ट के छोटे और बड़े आयाम के अनुसार प्रतिक्रिया देते हैं।

शुरुआत निःशुल्क

एआई शिक्षक के साथ CSS सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 40
पाठ: 159

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “Viewport Units: vw, vh, dvh” पाठ निःशुल्क है?

हाँ—“Viewport Units: vw, vh, dvh” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और CSS Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“Viewport Units: vw, vh, dvh” में मैं क्या सीखूँगा?

vw, vh और आधुनिक dvh units से तत्वों का आकार browser viewport के सापेक्ष निर्धारित कीजिए। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ CSS Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या CSS Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर CSS Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 3वाँ पाठ है।

“Viewport Units: vw, vh, dvh” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस CSS Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर CSS Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← CSS Academy पर वापस जाएँ