Vw और vh इकाइयों का उपयोग करके आयाम सेट करना

CSS3 नई इकाइयों का परिचय देता है। ( मुझे लगता है कि इस बारे में पहले ही बात कर ली है। ^Eng ) आप पहले से ही px, pt, em और नए रेम के बारे में सुन चुके हैं। आइए कुछ और देखें: vw और vh

अक्सर लेआउट में ऐसे तत्व होते हैं जो ब्राउज़र व्यूपोर्ट में फिट होने की गारंटी होते हैं। सामान्य तौर पर, इसके लिए जावास्क्रिप्ट का उपयोग किया जाता है। हम व्यूपोर्ट के आकार की जांच करते हैं और तदनुसार तत्वों का आकार बदलते हैं। यदि उपयोगकर्ता ब्राउज़र विंडो का आकार बदलता है, तो प्रक्रिया दोहराई जाती है।

Vw / vh के साथ हम व्यूपोर्ट के आकार के सापेक्ष तत्वों का आकार निर्धारित कर सकते हैं। Vw / vh की इकाइयाँ दिलचस्प हैं कि 1vw व्यूपोर्ट की चौड़ाई के 1/100 के बराबर एक इकाई है। तत्व को व्यूपोर्ट की चौड़ाई के बराबर चौड़ाई असाइन करने के लिए, चौड़ाई सेट करें: 100vw।

इसका उपयोग कैसे करें

लाइटबॉक्स, vw और vh का उपयोग करने के लिए एक महान उम्मीदवार हैं, क्योंकि यह आमतौर पर व्यूपोर्ट के सापेक्ष स्थित होता है, लेकिन यह मुझे लगता है कि स्थिति: मूल्यों के साथ तय की गई शीर्ष, नीचे, बाएं और दाएं का उपयोग करना आसान है, क्योंकि आप ऊंचाई और चौड़ाई को बिल्कुल भी सेट नहीं कर सकते हैं ।

आप नई इकाइयों का उपयोग उन तत्वों के आकार को निर्धारित करने के लिए कर सकते हैं जो सामान्य प्रवाह में हैं। उदाहरण के लिए, मैं एक पृष्ठ पर स्क्रीनशॉट रख सकता हूं। इन स्क्रीनशॉट्स की ऊंचाई व्यूपोर्ट की ऊंचाई से अधिक नहीं होनी चाहिए। ऐसा करने के लिए, मैं छवियों की अधिकतम ऊंचाई निर्धारित कर सकता हूं:

img { max-height:95vh; }

इस मामले में, मैंने स्क्रीन पर थोड़ी सी जगह छोड़ने के लिए ऊँचाई को 95vh पर सेट किया।

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

यदि IE9 सहित लगभग सभी प्रमुख ब्राउज़रों द्वारा रीम का समर्थन किया जाता है, तो vw और vh का उपयोग करना प्रतीक्षा के लायक है। फिलहाल, केवल इंटरनेट एक्सप्लोरर 9 उनका समर्थन करता है।

संदर्भ

^Eng विनिर्देशन

Vm इकाइयाँ

Gd666 की सलाह पर , मैंने थोड़ा जोड़ने का फैसला किया।
एक और व्यूपोर्ट यूनिट है जिसका मूल लेख में उल्लेख नहीं किया गया था। यह वी.एम.

vm व्यूपोर्ट की चौड़ाई या ऊंचाई के सापेक्ष गणना की जाती है, जो भी छोटा हो। मानों का छोटा 100 vm है। व्यूपोर्ट का आकार बदलते समय, vm में निर्दिष्ट आयाम तदनुसार बदलते हैं।

आप इसके बारे में विनिर्देश में पढ़ सकते हैं। ^eng