CSS इकाई रूपांतरण गाइड: px, rem, em, vw, vh विस्तृत विवरण

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

CSS इकाई वर्गीकरण को समझना

CSS इकाइयाँ दो बड़ी श्रेणियों में विभाजित हैं: निरपेक्ष इकाइयाँ और सापेक्ष इकाइयाँ। निरपेक्ष इकाइयों का निश्चित भौतिक आकार होता है, जबकि सापेक्ष इकाइयाँ किसी अन्य संदर्भ बिंदु से अपना परिकलित मान प्राप्त करती हैं। इस अंतर को समझना सूचित इकाई विकल्प बनाने का आधार है।

निरपेक्ष इकाइयाँ

निरपेक्ष इकाइयाँ निश्चित आकार की माप हैं। Web विकास में सबसे अधिक उपयोग की जाने वाली निरपेक्ष इकाई पिक्सेल (px) है। अन्य निरपेक्ष इकाइयों में पॉइंट (pt), सेंटीमीटर (cm), मिलीमीटर (mm) और इंच (in) शामिल हैं। ये इकाइयाँ मुख्य रूप से प्रिंट स्टाइलशीट के लिए या जब आपको ऐसी माप की आवश्यकता होती है जो संदर्भ के साथ नहीं बदलती, के लिए उपयोग की जाती हैं। स्क्रीन-आधारित CSS में, px एकमात्र निरपेक्ष इकाई है जिसका आप नियमित रूप से उपयोग करेंगे।

सापेक्ष इकाइयाँ

सापेक्ष इकाइयाँ एक संदर्भ मान के आधार पर अपने अंतिम मान की गणना करती हैं। em वर्तमान तत्व के फ़ॉन्ट आकार के सापेक्ष है, rem मूल तत्व के फ़ॉन्ट आकार के सापेक्ष है, vw और vh व्यूपोर्ट आयामों के सापेक्ष हैं, और प्रतिशत पैरेंट तत्व के सापेक्ष हैं। सापेक्ष इकाइयाँ रिस्पॉन्सिव और सुलभ डिज़ाइन की आधारशिला हैं, क्योंकि वे आपके लेआउट को विभिन्न संदर्भों में स्वचालित रूप से अनुकूलित करने की अनुमति देती हैं।

पिक्सेल (px): आधारभूत इकाई

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

px का उपयोग कब करें

बॉर्डर चौड़ाई: 1px बॉर्डर हमेशा 1px रहना चाहिए, फ़ॉन्ट आकार सेटिंग की परवाह किए बिना।
बॉक्स शैडो: शैडो ऑफ़सेट और ब्लर रेडियस आमतौर पर सुसंगत दृश्य प्रभावों के लिए पिक्सेल में सबसे अच्छे होते हैं।
बारीक विवरण: कोई भी मान जिसका स्केलिंग दृश्य डिज़ाइन को तोड़ देगा, जैसे पतली रेखा विभाजक या सटीक आइकन स्थिति।
मूल फ़ॉन्ट आकार: html { font-size: 16px; } को बेसलाइन के रूप में सेट करना एक सामान्य पैटर्न है, हालांकि आपको उपयोगकर्ता के ब्राउज़र डिफ़ॉल्ट का सम्मान करना चाहिए।

px से कब बचें

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

rem: मूल-सापेक्ष आकार

) के फ़ॉन्ट आकार के सापेक्ष है। अधिकांश ब्राउज़रों में, डिफ़ॉल्ट मूल फ़ॉन्ट आकार 16px है, इसलिए 1rem = 16px, 0.5rem = 8px, 2rem = 32px। rem का मुख्य लाभ यह है कि जब उपयोगकर्ता ब्राउज़र का डिफ़ॉल्ट फ़ॉन्ट आकार बदलते हैं तो यह स्केल होता है, जो इसे पहुंच के लिए सबसे अच्छा विकल्प बनाता है।

px को rem में बदलें

रूपांतरण सूत्र सरल है: पिक्सेल मान को मूल फ़ॉन्ट आकार से विभाजित करें।

rem = px / root-font-size

// With default root font size of 16px:
12px = 12 / 16 = 0.75rem
16px = 16 / 16 = 1rem
24px = 24 / 16 = 1.5rem
32px = 32 / 16 = 2rem
48px = 48 / 16 = 3rem

62.5% ट्रिक

कई डेवलपर्स को 16 से विभाजित करने का गणित थकाऊ लगता है। एक लोकप्रिय ट्रिक मूल फ़ॉन्ट आकार को 62.5% पर सेट करना है, जिससे 1rem 10px के बराबर हो जाता है। यह मानसिक गणना को सरल बनाता है: 14px 1.4rem बन जाता है, 24px 2.4rem बन जाता है, और इसी तरह।

html {
    font-size: 62.5%; /* 1rem = 10px */
}

body {
    font-size: 1.6rem; /* 16px */
}

h1 {
    font-size: 3.2rem; /* 32px */
    margin-bottom: 1.6rem; /* 16px */
}

पहुंच नोट: 62.5% ट्रिक काम करती है क्योंकि यह अभी भी उपयोगकर्ता की फ़ॉन्ट आकार प्राथमिकताओं का सम्मान करती है। मूल तत्व पर font-size: 62.5% सेट करना उपयोगकर्ता द्वारा चुने गए डिफ़ॉल्ट का 62.5% है, इसलिए यदि उपयोगकर्ता अपना ब्राउज़र 20px पर सेट करता है, तो मूल 12.5px हो जाता है, और सभी rem मान आनुपातिक रूप से स्केल होते हैं। कभी भी मूल फ़ॉन्ट आकार को एक निश्चित px मान पर सेट न करें, क्योंकि यह उपयोगकर्ता प्राथमिकताओं को ओवरराइड करता है।

em: संदर्भ-सापेक्ष आकार

em इकाई वर्तमान तत्व के फ़ॉन्ट आकार के सापेक्ष है (या font-size के अलावा अन्य गुणों के लिए, इसके पैरेंट तत्व के सापेक्ष)। इसका मतलब है कि 1em वर्तमान फ़ॉन्ट आकार के बराबर है, और em मान तत्व नेस्टिंग के साथ संयोजित होते हैं। यह संयोजन व्यवहार शक्तिशाली और भ्रमित करने वाला दोनों हो सकता है।

मिश्रित समस्याएँ

/* Parent: font-size 16px */
.parent {
    font-size: 1em; /* 16px */
}

/* Child: 1.2em of parent's 16px = 19.2px */
.child {
    font-size: 1.2em;
}

/* Grandchild: 1.2em of child's 19.2px = 23.04px */
.grandchild {
    font-size: 1.2em;
}

प्रत्येक नेस्टेड तत्व फ़ॉन्ट आकार से गुणा होता है, जो घातीय वृद्धि की ओर ले जाता है। यही कारण है कि rem आमतौर पर फ़ॉन्ट आकार के लिए बेहतर है। हालांकि, em विशिष्ट उपयोग मामलों में उत्कृष्ट है जहाँ आप घटक-स्तरीय स्केलिंग चाहते हैं।

em का उपयोग कब करें

घटक पैडिंग और मार्जिन: जब आप चाहते हैं कि अंतराल घटक के फ़ॉन्ट आकार के साथ स्केल हो, तो em सब कुछ आनुपातिक रखता है। यदि आप बटन का फ़ॉन्ट आकार बढ़ाते हैं, तो इसकी पैडिंग स्वचालित रूप से स्केल होती है।
media query ब्रेकपॉइंट: कुछ डेवलपर्स em-आधारित ब्रेकपॉइंट पसंद करते हैं क्योंकि वे उपयोगकर्ता की फ़ॉन्ट आकार प्राथमिकताओं के साथ स्केल होते हैं, यह सुनिश्चित करते हुए कि लेआउट उचित सामग्री चौड़ाई पर अनुकूलित होता है।
घटक के भीतर आइकन आकार: em में आकार वाले आइकन आसपास के टेक्स्ट के साथ आनुपातिक रूप से स्केल होते हैं।

व्यूपोर्ट इकाइयाँ: vw, vh, vmin, vmax

व्यूपोर्ट इकाइयाँ ब्राउज़र विंडो आयामों के सापेक्ष हैं। 1vw व्यूपोर्ट चौड़ाई के 1% के बराबर है, 1vh व्यूपोर्ट ऊँचाई के 1% के बराबर है। vmin, vw और vh में से छोटा है, vmax बड़ा है। ये इकाइयाँ उपलब्ध स्क्रीन स्थान पर प्रतिक्रिया करने वाले लेआउट बनाने के लिए आवश्यक हैं।

सामान्य व्यूपोर्ट इकाई उपयोग मामले

उपयोग मामला	इकाई	उदाहरण
पूर्ण-स्क्रीन हीरो सेक्शन	vh	height: 100vh
फ्लुइड टाइपोग्राफी	vw + clamp	font-size: clamp(1rem, 2.5vw, 2rem)
साथ-साथ लेआउट	vw	width: 50vw
वर्गाकार तत्व	vmin	width: 20vmin; height: 20vmin
पूर्ण-व्यूपोर्ट ओवरले	vw + vh	width: 100vw; height: 100vh

मोबाइल vh समस्या

मोबाइल ब्राउज़र पर, 100vh हमेशा दृश्यमान व्यूपोर्ट ऊँचाई के बराबर नहीं होता। ब्राउज़र का पता पट्टी और नेविगेशन नियंत्रण स्थान लेते हैं, लेकिन 100vh इन नियंत्रणों के पीछे के क्षेत्र को शामिल करता है। इससे पूर्ण-ऊँचाई वाले सेक्शन के निचले भाग में सामग्री कट जाती है। आधुनिक CSS समाधान के रूप में dvh (गतिशील व्यूपोर्ट ऊँचाई) प्रदान करता है, जो गतिशील टूलबार को ध्यान में रखता है। वैकल्पिक रूप से, window.innerHeight के आधार पर CSS कस्टम प्रॉपर्टी सेट करने के लिए JavaScript का उपयोग करें।

/* Modern approach */
.hero {
    height: 100dvh; /* Dynamic viewport height */
}

/* Fallback for older browsers */
.hero {
    height: 100vh;
    height: 100dvh;
}

नई व्यूपोर्ट इकाइयाँ: svh, lvh, dvh

CSS ने मोबाइल व्यूपोर्ट समस्याओं को हल करने के लिए तीन नई व्यूपोर्ट ऊँचाई इकाइयाँ पेश की हैं:

svh (छोटी व्यूपोर्ट ऊँचाई): सभी ब्राउज़र UI दृश्यमान होने पर व्यूपोर्ट ऊँचाई (पता पट्टी विस्तारित)।
lvh (बड़ी व्यूपोर्ट ऊँचाई): ब्राउज़र UI न्यूनतम होने पर व्यूपोर्ट ऊँचाई (पता पट्टी संकुचित)।
dvh (गतिशील व्यूपোर्ट ऊँचाई): वर्तमान व्यूपोर्ट ऊँचाई, ब्राउज़र UI के विस्तारित या संकुचित होने पर बदलती है।

चौड़ाई (svw, lvw, dvw) और न्यूनतम/अधिकतम इकाइयों (svmin, lvmin, dvmin, आदि) के लिए भी समान छोटे/बड़े/गतिशील संस्करण मौजूद हैं। मोबाइल पूर्ण-स्क्रीन लेआउट के लिए dvh, स्क्रॉलिंग के बिना सामग्री का प्रदर्शन सुनिश्चित करने के लिए svh, और अधिकतम संभव स्थान भरने के लिए lvh का उपयोग करें।

clamp() के साथ फ्लुइड टाइपोग्राफी

CSS clamp() फ़ंक्शन रिस्पॉन्सिव टाइपोग्राफी के लिए गेम-चेंजर है। यह तीन मान स्वीकार करता है: न्यूनतम, पसंदीदा और अधिकतम। ब्राउज़र पसंदीदा मान चुनता है लेकिन इसे न्यूनतम और अधिकतम के बीच सीमित रखता है।

/* Font size scales from 1rem to 2.5rem based on viewport */
h1 {
    font-size: clamp(1rem, 2.5vw + 0.5rem, 2.5rem);
}

/* Padding scales proportionally */
.container {
    padding: clamp(1rem, 3vw, 3rem);
}

यह दृष्टिकोण आपको व्यूपोर्ट-आधारित स्केलिंग के लाभ देता है बिना इस जोखिम के कि टेक्स्ट मोबाइल पर बहुत छोटा या डेस्कटॉप पर बहुत बड़ा हो जाए। यह फ़ॉन्ट आकार के लिए media query ब्रेकपॉइंट की आवश्यकता को समाप्त करता है, CSS जटिलता को काफी कम करता है।

रूपांतरण संदर्भ तालिका

इस तालिका को सामान्य रूपांतरणों के लिए त्वरित संदर्भ के रूप में उपयोग करें। सभी मान 16px रूट फ़ॉन्ट आकार और 1920x1080 व्यूपोर्ट मानते हैं।

px	rem	em (16px पर)	vw（1920px）	% (16px का)
8px	0.5rem	0.5em	0.417vw	50%
12px	0.75rem	0.75em	0.625vw	75%
16px	1rem	1em	0.833vw	100%
20px	1.25rem	1.25em	1.042vw	125%
24px	1.5rem	1.5em	1.25vw	150%
32px	2rem	2em	1.667vw	200%
48px	3rem	3em	2.5vw	300%
64px	4rem	4em	3.333vw	400%

CSS इकाई सर्वोत्तम अभ्यास

rem को फ़ॉन्ट आकार के रूप में उपयोग करें: यह सबसे महत्वपूर्ण नियम है। rem-आधारित फ़ॉन्ट आकार उपयोगकर्ता प्राथमिकताओं का सम्मान करते हैं और पूरे ऐप में लगातार स्केल करते हैं।
घटक अंतराल के लिए em का उपयोग करें: घटक के भीतर पैडिंग और मार्जिन em से लाभान्वित होते हैं, क्योंकि घटक का फ़ॉन्ट आकार बदलने पर वे आनुपातिक रूप से स्केल होते हैं।
बॉर्डर और बारीक विवरणों के लिए px का उपयोग करें: जो मान फ़ॉन्ट आकार के साथ स्केल नहीं होने चाहिए (जैसे 1px बॉर्डर और शैडो ऑफ़सेट) पिक्सेल में होने चाहिए।
लेआउट चौड़ाई के लिए प्रतिशत का उपयोग करें: लचीले लेआउट प्रतिशत-आधारित स्तंभ और कंटेनर चौड़ाई का उपयोग करते हैं, जो सामग्री को विभिन्न स्क्रीन आकारों में पुनः प्रवाहित करने की अनुमति देता है।
पूर्ण-स्क्रीन तत्वों के लिए व्यूपोर्ट इकाइयों का उपयोग करें: हीरो सेक्शन, ओवरले और कोई भी तत्व जो व्यूपोर्ट को भरना चाहिए, vh और vw से लाभान्वित होते हैं।
clamp() के साथ फ्लुइड टाइपोग्राफी: फ़ॉन्ट आकार के लिए media query ब्रेकपॉइंट के बजाय clamp() का उपयोग करें, न्यूनतम और अधिकतम मानों के बीच सहज स्केलिंग बनाएं।
रूट font-size को कभी px में सेट न करें: हमेशा प्रतिशत (जैसे 62.5%) का उपयोग करें या ब्राउज़र डिफ़ॉल्ट बनाए रखें। पिक्सेल में सेट करना उपयोगकर्ता की सुगमता प्राथमिकताओं को ओवरराइड करता है।
सुसंगत रहें: अपने प्रोजेक्ट के लिए एक इकाई रणनीति चुनें और उस पर टिके रहें। इकाइयों का यादृच्छिक मिश्रण कोडबेस को रखरखाव और डिबग करना कठिन बनाता है।

CSS इकाइयों के बीच त्वरित रूपांतरण की आवश्यकता है? हमारा मुफ़्त ऑनलाइन CSS इकाई कनवर्टर आज़माएँ। px से rem, em से px, व्यूपोर्ट इकाइयों और अधिक के बीच तुरंत रूपांतरण करें।

CSS इकाई कनवर्टर

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

फ़ॉन्ट आकार के लिए px या rem का उपयोग करना चाहिए?

अधिकांश मामलों में फ़ॉन्ट आकार के लिए rem का उपयोग करें। rem इकाइयाँ मूल फ़ॉन्ट आकार के सापेक्ष हैं, इसलिए जब उपयोगकर्ता ब्राउज़र का डिफ़ॉल्ट फ़ॉन्ट आकार बदलते हैं तो स्केल होती हैं। यह पहुंच में सुधार करता है। केवल बॉर्डर, शैडो या ऐसे विवरणों के लिए px का उपयोग करें जहाँ पिक्सेल-सटीकता की आवश्यकता हो जो उपयोगकर्ता प्राथमिकताओं के साथ स्केल नहीं होनी चाहिए।

em और rem में क्या अंतर है?

em पैरेंट तत्व के फ़ॉन्ट आकार के सापेक्ष है, जबकि rem मूल फ़ॉन्ट आकार के सापेक्ष है (आमतौर पर 16px)। em नेस्टिंग के साथ संयोजित होता है, जो अप्रत्याशित आकार परिवर्तन का कारण बन सकता है। rem हमेशा एक ही आधार को संदर्भित करता है, जो इसे अधिक पूर्वानुमानित बनाता है। वैश्विक आकार के लिए rem का उपयोग करें, जब आप चाहते हैं कि नेस्टेड तत्व आनुपातिक रूप से स्केल हों तो घटक-स्तरीय स्केलिंग के लिए em का उपयोग करें।

px को rem में कैसे बदलें?

पिक्सेल मान को मूल फ़ॉन्ट आकार (आमतौर पर 16px) से विभाजित करें। उदाहरण के लिए, 24px / 16 = 1.5rem। सूत्र है: rem = px / root-font-size। यदि मूल फ़ॉन्ट आकार 16px है, तो 1rem = 16px, 0.5rem = 8px, 2rem = 32px। आप त्वरित रूपांतरण के लिए ऑनलाइन CSS इकाई कनवर्टर का उपयोग कर सकते हैं।

व्यूपोर्ट इकाइयों (vw, vh) का उपयोग कब करना चाहिए?

जब आप ब्राउज़र विंडो के सापेक्ष आकार चाहते हैं तो व्यूपोर्ट इकाइयों का उपयोग करें। सामान्य उपयोग मामलों में पूर्ण-स्क्रीन हीरो सेक्शन (100vh), व्यूपोर्ट चौड़ाई के साथ स्केल होने वाली टाइपोग्राफी (clamp और vw), और उपलब्ध स्थान भरने वाले लेआउट शामिल हैं। बॉडी टेक्स्ट के लिए अकेले vw का उपयोग करने से बचें, क्योंकि यह मोबाइल पर बहुत छोटा या वाइडस्क्रीन पर बहुत बड़ा हो सकता है।

रिस्पॉन्सिव डिज़ाइन के लिए सबसे अच्छी CSS इकाई क्या है?

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

ToolHub's collection of 300+ free online tools including CSS unit converters, formatters, and more — no sign-up required.