गाइड सीएसएस Viewport इकाइयों vw, vh, vmin, vmax के लिए

व्यूपोर्ट-प्रतिशत लंबाई, या व्यूपोर्ट इकाइयाँ जैसा कि वे अक्सर संदर्भित होते हैं, उत्तरदायी सीएसएस इकाइयां हैं जो आपको आयामों को परिभाषित करने की अनुमति देती हैं चौड़ाई या व्यूपोर्ट की लंबाई के प्रतिशत के रूप में. व्यूपोर्ट इकाइयाँ उन मामलों में काफी उपयोगी हो सकती हैं जिनमें अन्य उत्तरदायी CSS इकाइयाँ, जैसे प्रतिशत, हैं काम करना मुश्किल है.

हालांकि W3C का प्रलेखन व्यूपोर्ट इकाइयों में वह सब कुछ होता है जिसे सिद्धांत में रखा जा सकता है, यह बहुत क्रिया नहीं है। तो, इस लेख में, हम इन सीएसएस इकाइयों पर एक नज़र डालेंगे व्यवहार में काम करें.

व्यूपोर्ट ऊंचाई (VH) और व्यूपोर्ट की चौड़ाई (VW)

W3C व्यूपोर्ट को परिभाषित करता है जैसा “प्रारंभिक युक्त ब्लॉक का आकार”. दूसरे शब्दों में, व्यूपोर्ट वह क्षेत्र है ब्राउज़र विंडो में निहित है या स्क्रीन पर देखने का कोई अन्य क्षेत्र.

VW तथा VH इकाइयों वास्तविक व्यूपोर्ट की चौड़ाई और ऊंचाई के प्रतिशत के लिए खड़े रहें। वे एक मूल्य ले सकते हैं 0 और 100 के बीच निम्नलिखित नियमों के अनुसार:

 100vw = व्यूपोर्ट चौड़ाई का 100% 1vw = व्यूपोर्ट चौड़ाई का 1% 100vh = व्यूपोर्ट ऊंचाई का 100% 1vh = व्यूपोर्ट ऊंचाई का 1% 

प्रतिशत इकाइयों के लिए अंतर

तो, व्यूपोर्ट इकाइयाँ प्रतिशत इकाइयों से कैसे भिन्न हैं? प्रतिशत इकाइयाँ उनके मूल तत्व का आकार विरासत में मिला जबकि व्यूपोर्ट इकाइयाँ नहीं। व्यूपोर्ट इकाइयों की गणना हमेशा की जाती है व्यूपोर्ट के आकार का प्रतिशत. नतीजतन, व्यूपोर्ट इकाइयों द्वारा परिभाषित एक तत्व अपने माता-पिता के आकार को पार कर सकता है.

उदाहरण: पूर्ण-स्क्रीन अनुभाग

पूर्ण-स्क्रीन अनुभाग शायद व्यूपोर्ट इकाइयों का सबसे व्यापक रूप से ज्ञात उपयोग के मामले हैं.

HTML काफी सरल है; हमारे पास बस है एक दूसरे के तहत तीन खंड और हम उनमें से प्रत्येक को चाहते हैं पूरी स्क्रीन को कवर करें (लेकिन अधिक नहीं).

CSS में, हम उपयोग करते हैं 100vh के रूप में ऊंचाई मूल्य और 100% जैसा चौड़ाई. हम उपयोग नहीं करते VW इकाई डिफ़ॉल्ट रूप से यहाँ, स्क्रॉलबार भी जोड़े जाते हैं व्यूपोर्ट आकार में। तो, अगर हम इस्तेमाल किया चौड़ाई: 100vw; नियम ए क्षैतिज स्क्रॉलबार पर दिखाई देगा ब्राउज़र विंडो के नीचे.

 मार्जिन: 0; गद्दी: 0;  अनुभाग पृष्ठभूमि-आकार: कवर; पृष्ठभूमि-स्थिति: केंद्र; चौड़ाई: 100%; ऊंचाई: 100vh;  .Section-1 पृष्ठभूमि-छवि: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img1.jpg');  .Section-2 पृष्ठभूमि-चित्र: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img2.jpg');  .Section-3 पृष्ठभूमि-चित्र: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img3.jpg');  

नीचे gif डेमो पर, आप यह देख सकते हैं VH है वास्तव में एक उत्तरदायी इकाई.

W3C डॉक्स के अनुसार, उपरोक्त क्षैतिज स्क्रॉलबार समस्या को जोड़कर हल किया जा सकता है अतिप्रवाह: ऑटो; मूल तत्व पर शासन। यह समाधान केवल आंशिक रूप से काम करता है, हालांकि। क्षैतिज स्क्रॉलबार, वास्तव में, लेकिन गायब हो जाता है चौड़ाई है अभी भी व्यूपोर्ट चौड़ाई के आधार पर गणना की जाती है (साइडबार शामिल), इसलिए तत्व जितना होना चाहिए, उससे थोड़ा बड़ा होगा.

मैं कहूंगा, मैं इस्तेमाल करने की हिम्मत नहीं करूंगा VW यूनिट पर फुल-स्क्रीन तत्वों को आकार देना इस कारण से। हमें इसकी आवश्यकता भी नहीं है, जैसा कि चौड़ाई: 100%; नियम पूरी तरह से काम करता है। फुलस्क्रीन लेआउट के साथ, असली चुनौती हमेशा से रही है उचित ऊंचाई मान सेट करें और यह VH यूनिट उस के लिए एक शानदार समाधान देता है.

अन्य उपयोग के मामले

अगर आपकी इसमें रूचि है तो अन्य उपयोग के मामले VW तथा VH लोलाबोट में एक महान लेख है जो एक सूची देता है वास्तविक जीवन के उदाहरण (कोडपेन डेमो के साथ), जैसे:

• फिक्स्ड-अनुपात कार्ड.
• एक तत्व को स्क्रीन से कम रखना.
• स्केलिंग टेक्स्ट.
• कंटेनर से बाहर तोड़ना.

Opera.dev में एक छोटा ट्यूटोरियल भी है कि आप किस प्रकार इसका लाभ उठा सकते हैं VW इकाई में उत्तरदायी टाइपोग्राफी बनाना.

आप केवल व्यूपोर्ट इकाइयों का उपयोग नहीं कर सकते चौड़ाई तथा ऊंचाई गुण लेकिन किसी अन्य पर। उदाहरण के लिए, आप कर सकते हैं पैडिंग और मार्जिन का आकार निर्धारित करें का उपयोग करते हुए VW तथा VH इकाइयों, भी.

व्यूपोर्ट मिन (vmin) और व्यूपोर्ट अधिकतम (VMAX)

vmin तथा VMAX इकाइयां आपको एक्सेस करने की अनुमति देती हैं छोटे या बड़े पक्ष का आकार निम्नलिखित नियमों के अनुसार व्यूपोर्ट का:

 100vmin = 100vw या 100vh, जो भी छोटा होता है 1vmin = 1vw या 1vh, जो भी छोटा होता है 100vmax = 100vw या 100vh, जो भी बड़ा होता है 1vmax / 1vw या 1vh, जो भी बड़ा हो; 

तो, मामले में चित्र अभिविन्यास, 100vmin के बराबर है 100vw, जैसा कि व्यूपोर्ट है खड़ी की तुलना में क्षैतिज रूप से छोटा. एक ही कारण के लिए, 100vmax के बराबर होगा 100vh.

इसी तरह, ए के मामले में क्षितिज के समानांतर, 100vmin के बराबर है 100vh, जैसा कि व्यूपोर्ट है क्षैतिज रूप से छोटे लंबवत. और निश्चित रूप से, 100vmax के बराबर होगा 100vw यहाँ.

उदाहरण: हर स्क्रीन पर नायक ग्रंथों को पठनीय बनाना

vmin तथा VMAX इकाइयाँ बहुत कम व्यापक रूप से जानी जाती हैं VW तथा VH. हालांकि, वे उत्कृष्ट रूप से एक के रूप में उपयोग किया जा सकता है अभिविन्यास के लिए स्थानापन्न @media प्रश्नों. उदाहरण के लिए, vmin तथा VMAX काम में आ सकता है जब आपके पास ऐसे तत्व हों जो अजीब लग सकते हैं विभिन्न पहलुओं पर अनुपात.

नए कोड में एक महान ट्यूटोरियल है जिसमें वे चर्चा करते हैं कि आप कैसे कर सकते हैं नायक पाठ पठनीय रखें हर स्क्रीन पर, का उपयोग कर vmin इकाई। हीरो ग्रंथों को देखने के लिए प्रवण हैं मोबाइल पर बहुत छोटा और बड़े मॉनीटर पर बहुत बड़ा.

यहाँ उनके समाधान का मुख्य विचार है:

 h1 font-size: 20vmin; font-family: Avenir, sans-serif; फ़ॉन्ट-वजन: 900; पाठ-संरेखण: केंद्र;  

कोडपेन डेमो में, आप जांच सकते हैं कि कैसे vmin नायक ग्रंथों की पठनीयता की समस्या को हल करता है। तक पहुंच “पूरा पृष्ठ” कोडपेन पर देखें, फिर अपनी ब्राउज़र विंडो का आकार बदलें दोनों क्षैतिज और लंबवत रूप से देखने के लिए कि नायक पाठ कैसे बदलता है.

ब्राउज़र का समर्थन

जैसा कि आप नीचे CanIUse चार्ट पर देख सकते हैं, ब्राउज़र समर्थन अपेक्षाकृत अच्छा है व्यूपोर्ट इकाइयों के लिए। हालाँकि, ध्यान रखें कि IE और Edge के कुछ संस्करण समर्थन नहीं करते हैं VMAX. इसके अलावा, iOS 6 और 7 के साथ एक समस्या है VH इकाई, जिसे iOS 8 में फिक्स किया गया था.