REM से VH कनवर्टर क्या है?

टूल्समेट पर REM से VH कन्वर्टर एक सरल और उपयोगी टूल है, जिसका दुरुपयोग वेब डिज़ाइनर और फ्रंट-एंड डेवलपर्स द्वारा किया जा सकता है जो रिस्पॉन्सिव लेआउट का सपना देखने के लिए उत्सुक हैं। इस कन्वर्टर का उपयोग करके, हम बिना किसी कठिनाई के REM (रूट EM) इकाइयों को VH (व्यूपोर्ट हाइट) इकाइयों में बदल सकते हैं और इस प्रकार ऐसी साइटें बना सकते हैं जिन्हें आसानी से किसी भी आकार में स्केल किया जा सकता है।.

चाहे आप टाइपोग्राफी, चीज़ों की ऊँचाई या पूरी स्क्रीन व्यवस्था को ध्यान से देखें। यह वह उपयोगिता है जो हर उपकरण में CSS आयाम को सटीक और समायोज्य बनाएगी। उसे रेस्पॉन्सिव वेब डिज़ाइन (RWD) या फ़्लूइड लेआउट करना होगा।.

आरईएम और वीएच इकाइयों को जानना।.

आरईएम (रूट ईएम) क्या है?

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

इस प्रकार, एक डिज़ाइन, जो 1rem को 16px के रूप में उपयोग करता है, 1rem होगा, 2rem को 32px के रूप में, इत्यादि। आपकी साइट के डिज़ाइन की दूरियाँ, फ़ॉन्ट आकार और अनुपात पूरी साइट में एक समान रखना आसान है क्योंकि मूल फ़ॉन्ट आकार के संबंध में सभी चीज़ें समान आकार की होती हैं।.

उदाहरण:

html { फ़ॉन्ट-आकार: 16px; } h1 { फ़ॉन्ट-आकार: 2rem; /* बराबर 32px */ }

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

VH, व्यूपोर्ट हाइट का संक्षिप्त नाम है। यह CSS की एक तुलनात्मक इकाई है, जो ब्राउज़र विंडो (व्यूपोर्ट) के आकार के आधार पर एलिमेंट का आकार बदलती है।.

1vh 1 प्रतिशत व्यू पोर्ट ऊंचाई का प्रतिनिधित्व करता है।.

इस प्रकार 1vh = 9px जब ब्राउज़र विंडो की ऊंचाई 900ping हो।.

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

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

REM से VH रूपांतरण, फ़ॉन्ट-आधारित स्केलिंग (REM) से व्यूपोर्ट-आधारित स्केलिंग (VH) पर निर्भर पहलू में समायोजन करने में मदद करता है।.

इनमें से एक वह हीरो बैनर होगा जिसे आप बना रहे हैं और उसे व्यूपोर्ट की ऊँचाई का एक निश्चित प्रतिशत घेरना होगा – न कि केवल टेक्स्ट के साथ सिकुड़ना होगा। विभिन्न उपकरणों और रिज़ॉल्यूशन के प्रदर्शन को बनाए रखने के लिए, आप REM को VH में बदल सकते हैं।.

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

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

दूसरे शब्दों में, REM से VH रूपांतरण, टेक्स्ट-आधारित स्केलिंग और व्यूपोर्ट-आधारित प्रतिक्रियाशीलता के बीच के रिक्त स्थान को भरता है और संभवतः आपको वास्तव में प्रवाहपूर्ण, लचीला लेआउट प्राप्त करने में मदद करता है।.

REM से VH रूपांतरण सूत्र.

अंतर्निहित फ़ॉन्ट आकार और व्यूपोर्ट ऊंचाई बुनियादी निर्धारक हैं जिन पर REM और VH इकाई के बीच संबंध स्थापित होता है।.

सूत्र:

VH=(REM मान×मूल फ़ॉन्ट आकार px में) / व्यूपोर्ट ऊँचाई px में × 100

जहाँ:

• आरईएम मान: REM का वह मूल्य जो वांछित है।.
• मूल फ़ॉन्ट आकार: आधार फ़ॉन्ट आकार (आमतौर पर 16px).
• व्यूपोर्ट ऊंचाई: यह स्क्रीन की लम्बाई या वेब ब्राउज़र विंडो के पिक्सेल की मात्रा है।.

उदाहरण रूपांतरण

हम कहते हैं:

• मूल फ़ॉन्ट आकार = 16पिक्सल
• व्यूपोर्ट ऊंचाई = 900 पिक्सेल
• तुममें से चाहा जाएगा 2 आरईएम से वीएच.

स्टेप 1: REM को पिक्सेल में परिवर्तित करें

2 आरईएम × 16 = 32px

चरण दो: पिक्सेल को VH में परिवर्तित करें

(32 / 900) × 100 = 3.56 वीएच

✅ तो 2 आरईएम = 3.56 वीएच 900px-उच्च व्यूपोर्ट.

वीएच कनवर्टर में आरईएम के साथ (चरण-दर-चरण)।.

ToolsMate REM को VH कन्वर्टर में बदलना ज़्यादा मुश्किल नहीं है। इन चरणों का पालन करें:

REM मान दर्ज करें

REM का वह आंकड़ा इनपुट बॉक्स में डालें जिसे आप प्राप्त करना चाहते हैं। उदाहरण के लिए, "2" दर्ज करें।.

मूल फ़ॉन्ट आकार (वैकल्पिक)

कनवर्टर में डिफ़ॉल्ट फ़ॉन्ट 16px फ़ॉन्ट का उपयोग किया जाता है। आप ऐसा तब कर सकते हैं जब आप किसी अलग बेस साइज़ (जैसे 18px) पर डिज़ाइन कर रहे हों।.

व्यूपोर्ट की ऊँचाई दर्ज करें

अपने व्यूपोर्ट का आकार पिक्सेल में टाइप करें (उदाहरण के लिए 900(या 1080)px).

तुरंत परिणाम प्राप्त करें

परिवर्तित VH भी स्वचालित रूप से देखा जाएगा। फिर आप इसे काट सकते हैं और अपने सीएसएस कोड में पेस्ट कर सकते हैं।.

परीक्षण और समायोजन

व्यूपोर्ट के रूट या ऊंचाई के विभिन्न स्तरों का अन्वेषण करें और देखें कि आपका लेआउट विभिन्न आकार के स्क्रीन में कैसा दिखाई देगा।.

REM से VH कनवर्टर के लाभ.

• शुद्धता: कोई हाथ से गणना नहीं - कुछ सेकंड के भीतर परिवर्तित किया जा सकता है।.
• उत्तरदायी डिजाइन में आदर्श: फ़ॉन्ट-आधारित और व्यूपोर्ट-आधारित तत्वों का मिलान करते समय यह काफी उपयोगी हो सकता है।.
• कंप्यूटर इंटरफ़ेस संगतता: स्क्रीन के आकार के बावजूद आनुपातिक लेआउट होना चाहिए।.
• अनुकूलन प्राथमिकताएँ: रूट फ़ॉन्ट आकार और व्यूपोर्ट आकार को वास्तविक जीवन की दुनिया में परिवर्तित करना।.
• आवेदन पत्र: समय की बचत: गणित में समय की बर्बादी।.

यह उपकरण फ्रंट-एंड उपयोगकर्ताओं, उपयोगकर्ता इंटरफ़ेस/उपयोगकर्ता अनुभव डिजाइनरों और सीएसएस छात्रों के लिए किफायती है, जो कम से कम परेशानी के साथ उत्तरदायी स्केलिंग तकनीक हासिल करना चाहते हैं।.

REM से VH रूपांतरण तालिका (उदाहरण)

यहां 16px के मूल फ़ॉन्ट आकार और 900px की व्यूपोर्ट ऊंचाई पर आधारित एक त्वरित संदर्भ तालिका दी गई है: