पूर्णतया उत्तरदायी वेबसाइट बनाने के लिए लचीला CM से VH रूपांतरण।.

आधुनिक वेब डिज़ाइन में लचीलापन सर्वोपरि है। आपके लेआउट बड़े और छोटे, दोनों आकार की स्क्रीन, जैसे बड़े मॉनिटर और छोटे स्मार्टफ़ोन, पर आकर्षक होने चाहिए। टूल्समेट द्वारा निर्मित CM से VH कन्वर्टर इसमें आपकी मदद करेगा।.

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

सीएम और वीएच यूनिट इनसाइट।.

वेब डिजाइनिंग में CM (CM) क्या है?

सेंटीमीटर (सेमी) लंबाई की एक इकाई है जिसका इस्तेमाल आमतौर पर प्रिंट डिज़ाइन में या सटीक माप लेने के लिए किया जाता है। सीएसएस का इस्तेमाल सेंटीमीटर का इस्तेमाल करके कुछ आयामों का आकार निर्धारित करने के लिए किया जा सकता है, लेकिन इसका एक नुकसान यह है कि सेंटीमीटर के मान निश्चित होते हैं, यानी स्क्रीन के आकार या रिज़ॉल्यूशन पर निर्भर नहीं करते। इसलिए, जो एक गैजेट पर एकदम सही छवि हो सकती है, वह दूसरे पर विकृत छवि हो सकती है।.

व्यूपोर्ट ऊंचाई (VH) क्या है?

दूसरी ओर व्यूपोर्ट ऊंचाई (VH) एक उत्तरदायी CSS इकाई है।.

1 VH = कुल व्यूपोर्ट ऊंचाई का 1/100.

तब, 1 VH = 9 पिक्सेल जब किसी डिवाइस की स्क्रीन की ऊंचाई 900 पिक्सेल हो।.

VH मान स्क्रीन की ऊँचाई के साथ स्वतः बदलते रहते हैं और इस प्रकार रिस्पॉन्सिव लेआउट के साथ फिट हो जाते हैं। फिर आप VH में ऐसे पृष्ठ बना सकते हैं जो किसी भी डिवाइस के इस्तेमाल के बावजूद सुसंगत, संतुलित और उपयोगकर्ता-अनुकूल हों।.

CM से VH रूपांतरण सूत्र

सेंटीमीटर को व्यूपोर्ट ऊंचाई में बदलने के लिए उपयोग किया जा सकने वाला मूल सूत्र नीचे दिखाया गया है:

VH = (सेमी × 37.7952755906)​ / स्क्रीन की ऊँचाई पिक्सेल में

इस समीकरण का सिद्धांत यह है कि CM को पिक्सेल में परिवर्तित किया जाता है (CM को 96 DPI से गुणा करने पर पिक्सेल की डिफ़ॉल्ट संख्या प्राप्त होती है, 1 इंच 2.54 cm होता है) और फिर पिक्सेल को व्यूपोर्ट की ऊंचाई से विभाजित किया जाता है।.

उदाहरण: CM से VH रूपांतरण

हम 20 सेमी तत्व और 1080 पिक्सल के स्क्रीन आकार के केस परिदृश्य का उपयोग करेंगे।.

वीएच = (20 × 37.7952755906) / 1080 ​= 0.7वीएच

यह 1080px-ऊँचे डिस्प्ले पर 20 सेमी या लगभग 0.7 VH के समान है।.

यह आंकड़ा निश्चित रूप से विभिन्न स्क्रीन ऊंचाइयों पर निर्भर करता है और यही कारण है कि वीएच उत्तरदायी डिजाइन के संबंध में इतना अनुकूलनीय है।.

CM से VH कनवर्टर का उपयोग कैसे करें।.

रूपांतरण सरल और तेज़ है, केवल कुछ चरणों का पालन किया जाना है:

1. CM से VH कनवर्टर ToolsMate.online.
2. वांछित CM का मान दर्ज करें.
3. अपनी स्क्रीन पर पिक्सेल की मात्रा जोड़ें (जैसे 1080, 1440 आदि)।.
4. “कन्वर्ट” बटन पर क्लिक करें।.
5. व्यूपोर्ट ऊंचाई (VH) प्रति सेकंड पूर्वावलोकन.

फिर आप अपने उत्तरदायी लेआउट बनाने के लिए अपने CSS में VH का मान डाल सकते हैं।.

CM को VH में क्यों परिवर्तित करें?

व्यूपोर्ट की ऊंचाई के साथ सेंटीमीटर के प्रतिस्थापन के कुछ डिज़ाइन लाभ हैं:

1. पूरी तरह उत्तरदायी लेआउट

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

2. बेहतर उपयोगकर्ता अनुभव

वीएच के समान अनुपात किसी भी डिवाइस पर अधिक प्राकृतिक होते हैं और उन्हें स्क्रॉल करने या आकार बदलने की आवश्यकता नहीं होती है।.

3. सरलीकृत कोड प्रबंधन

सापेक्ष इकाइयाँ कई CSS मीडिया क्वेरीज़ की आवश्यकता को न्यूनतम कर देती हैं, और आपकी स्टाइलशीट अधिक साफ़ और रखरखाव योग्य हो जाती है।.

4. बेहतर पहुंच

वीएच-आधारित डिजाइन सुगम्यता वातावरण (ज़ूमिंग सहित) विकल्पों को समायोजित करने में सक्षम हैं, और इसका आनंद सभी उपयोगकर्ताओं द्वारा साझा किया जा सकता है।.

सीएम से वीएच रूपांतरण अनुप्रयोग.

सीएम टू वीएच कनवर्टर का उपयोग अधिकांश वेब डिज़ाइन मामलों में किया जा सकता है जैसे:

• हीरो अनुभाग या बैनर: पूर्ण स्क्रीन दृश्यों को किसी भी डिस्प्ले पर पूर्ण अनुकूलन के साथ रखा जा सकता है।.
• पृष्ठभूमि चित्र: उपकरणों का अनुपात बनाए रखें।.
• मुद्रण और रिक्ति: अधिक जटिल CSS स्क्रिप्ट के बिना भी लेआउट बनाएं।.
• एनिमेशन: स्क्रीन के आकार के साथ आनुपातिकता पर गतियाँ या प्रभाव।.

जब आप चाहते हैं कि तत्व व्यूपोर्ट के साथ विस्तारित हों, तो VH सबसे उपयुक्त है, तथा CM से वेब के बीच डिज़ाइन को स्वैप करना प्रिंट में डिज़ाइन या यहां तक कि स्थिर मॉकअप को वेब में परिवर्तित करने में सटीकता के लिए वांछित है।.

सी.एम. से वी.एच. रूपांतरण की तालिका।.

सामान्य 1080 पिक्सल स्क्रीन ऊंचाई मानते हुए एक त्वरित संदर्भ तालिका नीचे दी गई है: