पीएक्स से आरईएम से ईएम कन्वर्टर – मुफ्त सीएसएस यूनिट कैलकुलेटर

तुरंत पिक्सेल को आरईएम और ईएम इकाइयों में परिवर्तित करें। अनुकूलन योग्य वेब डिजाइन के लिए मुफ्त सीएसएस इकाई कन्वर्टर। कस्टम फॉन्ट आकार और सटीक परिणामों के लिए रीयल-टाइम गणना का समर्थन करता है।

पीएक्स, आरईएम और ईएम इकाई परिवर्तक

पिक्सेल (पीएक्स), रूट ईएम (आरईएम) और ईएम (ईएम) इकाइयों के बीच परिवर्तन करें। समतुल्य मान देखने के लिए किसी भी फ़ील्ड में एक मान दर्ज करें।

रूट फॉन्ट आकार

मूल तत्व फॉन्ट आकार

पिक्सेल (पीएक्स)

रूट ईएम (आरईएम)

rem

ईएम

नकारात्मक या शून्य मानों के लिए दृश्य उपलब्ध नहीं है

परिवर्तन सूत्र

पीएक्स से आरईएम: पीएक्स मान ÷ रूट फॉन्ट आकार
पीएक्स से ईएम: पीएक्स मान ÷ मूल तत्व फॉन्ट आकार
आरईएम से पीएक्स: आरईएम मान × रूट फॉन्ट आकार
ईएम से पीएक्स: ईएम मान × मूल तत्व फॉन्ट आकार

लोडिंग कैलकुलेटर...

📚

दस्तावेज़ीकरण

पीएक्स, आरईएम और ईएम यूनिट कन्वर्टर: आवश्यक सीएसएस यूनिट्स की व्याख्या

आधुनिक वेब विकास के लिए CSS इकाई रूपांतरण क्यों महत्वपूर्ण है

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

यह PX, REM, और EM इकाई कन्वर्टर आपको इन तीन मौलिक CSS इकाइयों के बीच तेज़ी से अनुवाद करने में मदद करता है। पिक्सेल आपको सटीक नियंत्रण देते हैं - बॉर्डर और सूक्ष्म विवरणों के लिए बेहतरीन। REM इकाइयाँ रूट फ़ॉन्ट आकार के साथ स्केल होती हैं, जो उन्हें पूरी साइट में सुसंगत स्पेसिंग और टाइपोग्राफी के लिए आदर्श बनाती हैं। EM इकाइयाँ अपने मूल तत्व के सापेक्ष स्केल होती हैं, जो आनुपातिक अनुपात बनाए रखने वाले स्व-अंतर्निहित घटकों के लिए बिल्कुल सही हैं।

जटिल हिस्सा? उनके बीच रूपांतरण करने के लिए फ़ॉन्ट आकारों को ध्यान में रखना आवश्यक है, जो आपके रूट तत्व और व्यक्तिगत घटकों के बीच भिन्न होते हैं। एक सामान्य गलती जो मैं डेवलपर्स में देखता हूँ वह है हर जगह पिक्सेल का उपयोग करना क्योंकि यह सरल लगता है। हालांकि यह शुरू में काम करता है, यह सुलभता की समस्याएं पैदा करता है जब उपयोगकर्ता अपने ब्राउज़र के डिफ़ॉल्ट फ़ॉन्ट आकार को बढ़ाते हैं - लेआउट अनुपातिक रूप से अनुकूलित नहीं होता।

CSS यूनिट्स को समझना: PX, REM, और EM

पिक्सेल (PX) क्या होते हैं?

पिक्सेल (PX) CSS का सबसे सीधा यूनिट है—जो आप निर्दिष्ट करते हैं वही मिलता है। एक CSS पिक्सेल एक संदर्भ यूनिट है, जरूरी नहीं कि यह एक भौतिक स्क्रीन पिक्सेल हो (विशेष रूप से हाई-DPI डिस्प्ले जैसे रेटिना स्क्रीन पर)। वे निश्चित आकार प्रदान करते हैं जो फॉन्ट आकार या मूल तत्वों के आधार पर नहीं बदलता।

1.element {
2  width: 200px;
3  font-size: 16px;
4  margin: 10px;
5}
6

पिक्सेल कब अच्छे काम करते हैं:

बॉर्डर और विभाजक (1px या 2px बॉर्डर स्पष्ट रहते हैं)
छोटे, सटीक विवरण जो स्केल नहीं होने चाहिए
सटीक आयाम चाहिए तब फिक्स्ड-चौड़ाई कंटेनर
आइकन आकार जब पिक्सेल-परफेक्ट स्प्राइट शीट्स के साथ काम कर रहे हों

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

REM यूनिट्स क्या होते हैं?

REM (रूट em) यूनिट्स रूट तत्व के फॉन्ट आकार के आधार पर स्केल होते हैं—आमतौर पर <html> तत्व। अधिकांश ब्राउज़र डिफ़ॉल्ट रूप से 16px पर सेट होते हैं, इसलिए 1rem 16px के बराबर होता है जब तक आप रूट फॉन्ट आकार नहीं बदलते। यहाँ वह है जो REM को शक्तिशाली बनाता है: वे पूरी साइट में सुसंगत, पूर्वानुमान योग्य स्केलिंग प्रदान करते हैं।

1html {
2  font-size: 16px; /* अधिकांश ब्राउज़र में डिफ़ॉल्ट */
3}
4
5.element {
6  width: 12.5rem; /* डिफ़ॉल्ट रूट फॉन्ट आकार के साथ 200px के बराबर */
7  font-size: 1rem; /* 16px के बराबर */
8  margin: 0.625rem; /* 10px के बराबर */
9}
10

डेवलपर्स REM यूनिट्स को क्यों पसंद करते हैं:

सुसंगत स्केलिंग: रूट फॉन्ट आकार बदलें, और सब कुछ अनुपातिक रूप से स्केल होता है
पहुंच अनुकूलता: जब उपयोगकर्ता अपने ब्राउज़र के फॉन्ट आकार को समायोजित करते हैं, तो REM-आधारित लेआउट स्वचालित रूप से अनुकूलित होते हैं
रखरखाव में आसानी: एक ही जगह पर स्पेसिंग मूल्यों को अपडेट करें बजाय पिक्सेल मूल्यों में खोज करने के
कोई संयोजन समस्या नहीं: EM यूनिट्स के विपरीत, REM नेस्टेड तत्वों में संयोजित नहीं होते

अनुभव से प्रो टिप: अपना रूट फॉन्ट आकार 62.5% पर सेट करें (जो डिफ़ॉल्ट 16px के साथ 1rem = 10px बनाता है)। यह मानसिक गणना को आसान बनाता है—1.6rem = 16px, 2.4rem = 24px। बस याद रखें कि अपना बॉडी फॉन्ट-आकार वापस 1.6rem पर सेट करें ताकि टेक्स्ट डिफ़ॉल्ट रूप से 16px हो। W3C CSS मूल्य और यूनिट विनिर्देश के अनुसार, REM यूनिट्स हमेशा रूट तत्व का संदर्भ लेते हैं, जो जटिल लेआउट में पूर्वानुमान योग्य बनाता है।

EM यूनिट्स क्या होते हैं?

EM यूनिट्स अपने मूल तत्व के फॉन्ट आकार के अनुसार स्केल होते हैं, जिससे वे संदर्भ-जागरूक बन जाते हैं। यह व्यवहार REM यूनिट्स से भिन्न है, जो हमेशा रूट का संदर्भ लेते हैं। "em" नाम टाइपोग्राफी से आया है—ऐतिहासिक रूप से यह किसी दिए गए टाइपफेस में कैपिटल "M" की चौड़ाई को संदर्भित करता था।

1.parent {
2  font-size: 20px;
3}
4
5.child {
6  font-size: 0.8em; /* 16px के बराबर (20px × 0.8) */
7  margin: 0.5em; /* 8px के बराबर (16px × 0.5) */
8}
9

EM यूनिट्स कब चमकते हैं:

घटक-आधारित डिजाइन: फॉन्ट आकार के साथ स्केल होने वाला पैडिंग और मार्जिन
टाइपोग्राफी: लाइन हाइट्स बिना यूनिट या ईएम के साथ अच्छी तरह काम करती हैं (जैसे line-height: 1.5em)
स्व-निहित मॉड्यूल: बटन या कार्ड जो फॉन्ट आकार बदलने पर अनुपात बनाए रखते हैं
मीडिया क्वेरीज़: MDN वेब डॉक्स के अनुसार, मीडिया क्वेरीज़ में EM यूनिट्स मूल तत्व के बजाय ब्राउज़र के डिफ़ॉल्ट फॉन्ट आकार का संदर्भ लेते हैं

संयोजन की फंदी: यहाँ डेवलपर्स अक्सर फंस जाते हैं। EM यूनिट्स नेस्टेड तत्वों के माध्यम से कैस्केड होते हैं, जो अप्रत्याशित परिणाम पैदा कर सकते हैं:

1.level-1 { font-size: 1.2em; }  /* 16px पर 19.2px */
2.level-2 { font-size: 1.2em; }  /* 23.04px (19.2px × 1.2) */
3.level-3 { font-size: 1.2em; }  /* 27.65px (23.04px × 1.2) */
4

तीन स्तरों की नेस्टिंग के बाद, आपका टेक्स्ट 20% की बजाय 73% बढ़ गया है। यही कारण है कि ब्राउज़र समर्थन में सुधार होने के बाद कई डेवलपर्स टाइपोग्राफी के लिए REM यूनिट्स पर स्विच कर गए।

रूपांतरण सूत्र और गणना

पीएक्स, आरईएम और ईएम इकाइयों के बीच गणितीय संबंधों को समझना सटीक रूपांतरण के लिए महत्वपूर्ण है। यहां हमारे कन्वर्टर में उपयोग किए जाने वाले सूत्र हैं:

पीएक्स से आरईएम रूपांतरण

पिक्सल को आरईएम इकाइयों में बदलने के लिए, पिक्सल मान को रूट फॉन्ट आकार से भाग दें:

$REM = \frac{PX}{rootFontSize}$

उदाहरण के लिए, 16px के डिफ़ॉल्ट रूट फॉन्ट आकार के साथ:

16px = 1rem
24px = 1.5rem
8px = 0.5rem

पीएक्स से ईएम रूपांतरण

पिक्सल को ईएम इकाइयों में बदलने के लिए, पिक्सल मान को मूल तत्व के फॉन्ट आकार से भाग दें:

$EM = \frac{PX}{parentFontSize}$

उदाहरण के लिए, 16px के मूल तत्व फॉन्ट आकार के साथ:

16px = 1em
24px = 1.5em
8px = 0.5em

आरईएम से पीएक्स रूपांतरण

आरईएम इकाइयों को पिक्सल में बदलने के लिए, आरईएम मान को रूट फॉन्ट आकार से गुणा करें:

$PX = REM \times rootFontSize$

उदाहरण के लिए, 16px के डिफ़ॉल्ट रूट फॉन्ट आकार के साथ:

1rem = 16px
1.5rem = 24px
0.5rem = 8px

ईएम से पीएक्स रूपांतरण

ईएम इकाइयों को पिक्सल में बदलने के लिए, ईएम मान को मूल तत्व के फॉन्ट आकार से गुणा करें:

$PX = EM \times parentFontSize$

उदाहरण के लिए, 16px के मूल तत्व फॉन्ट आकार के साथ:

1em = 16px
1.5em = 24px
0.5em = 8px

आरईएम से ईएम रूपांतरण

आरईएम इकाइयों को ईएम इकाइयों में बदलने के लिए, आपको रूट फॉन्ट आकार और मूल तत्व के फॉन्ट आकार दोनों को ध्यान में रखना होगा:

$EM = REM \times \frac{rootFontSize}{parentFontSize}$

यदि रूट और मूल तत्व दोनों फॉन्ट आकार समान हैं (जैसे 16px), तो 1rem = 1em होता है।

ईएम से आरईएम रूपांतरण

ईएम इकाइयों को आरईएम इकाइयों में बदलने के लिए, निम्न सूत्र का उपयोग करें:

$REM = EM \times \frac{parentFontSize}{rootFontSize}$

फिर से, यदि दोनों फॉन्ट आकार समान हैं, तो 1em = 1rem होता है।

पीएक्स से आरईएम से ईएम यूनिट कन्वर्टर का उपयोग कैसे करें

सटीक रूपांतरण प्राप्त करना इस टूल के साथ सीधा है। मुख्य बात यह है कि आप अपनी विशिष्ट स्थिति के लिए किन फॉन्ट साइज़ का उपयोग करेंगे।

त्वरित शुरुआत गाइड

अपना मान दर्ज करें किसी भी फील्ड में—पिक्सल, आरईएम, या ईएम
परिणाम देखें तुरंत अन्य दो यूनिट्स में
फॉन्ट साइज़ को समायोजित करें अपनी परियोजना से मेल खाने के लिए:
- रूट फॉन्ट साइज़: आपने <html> तत्व पर क्या सेट किया है (आमतौर पर 16px)
- पैरेंट फॉन्ट साइज़: विशिष्ट तत्व के पैरेंट का फॉन्ट साइज़ (भी आमतौर पर 16px)
आवश्यक मान को कॉपी करें कॉपी बटन का उपयोग करके

अपनी परियोजना के लिए सटीक परिणाम प्राप्त करना

कन्वर्टर डिफ़ॉल्ट रूप से 16px को रूट और पैरेंट दोनों फॉन्ट साइज़ के लिए सेट करता है क्योंकि यह ब्राउज़र मानक है। लेकिन यहाँ महत्वपूर्ण बात यह है: आपकी वास्तविक परियोजना अलग-अलग मान का उपयोग कर सकती है।

अपना रूट फॉन्ट साइज़ ढूँढना: अपने ब्राउज़र के डेवलपर टूल्स को खोलें, <html> तत्व का निरीक्षण करें, और कम्प्यूटेड फॉन्ट-साइज़ की जाँच करें। यदि आपने html { font-size: 62.5%; } सेट किया है, तो आपका रूट फॉन्ट साइज़ 10px है (16px का 62.5%)।

अपना पैरेंट फॉन्ट साइज़ ढूँढना: ईएम रूपांतरण के लिए, आपको उस विशिष्ट पैरेंट तत्व का फॉन्ट साइज़ चाहिए जहाँ आप शैली लागू कर रहे हैं। डेव टूल्स में उस तत्व का निरीक्षण करें ताकि उसका कम्प्यूटेड फॉन्ट-साइज़ देख सकें। यदि पैरेंट में font-size: 1.2rem है और आपका रूट 16px है, तो सटीक ईएम गणना के लिए पैरेंट फॉन्ट साइज़ को 19.2px पर सेट करें।

सामान्य रूपांतरण परिदृश्य

डिज़ाइन से कोड तक: आपके Figma फाइल में padding: 24px दिखता है। आप बेहतर पहुँच के लिए आरईएम यूनिट्स का उपयोग करना चाहते हैं। पीएक्स फील्ड में 24 दर्ज करें, और आप देखेंगे कि यह 1.5rem के बराबर है (16px रूट मानते हुए)।

बटन घटक बनाना: आप पैडिंग को बटन के फॉन्ट साइज़ के साथ स्केल करना चाहते हैं। यदि बटन में font-size: 1.125rem (18px) है, तो पैरेंट फॉन्ट साइज़ को 18 पर सेट करें, अपना वांछित पिक्सल पैडिंग दर्ज करें, और परिणामी ईएम मान का उपयोग करें।

प्रतिक्रियाशील टाइपोग्राफी: आप एक हेडिंग बना रहे हैं जो डेस्कटॉप पर 32px है। 32px दर्ज करें ताकि देख सकें कि यह 2rem है, जो उपयोगकर्ताओं द्वारा ब्राउज़र के फॉन्ट साइज़ को समायोजित करने पर उचित रूप से स्केल होगा।

वास्तविक दुनिया में CSS यूनिट रूपांतरण के उपयोग के मामले

सूत्र जानना एक बात है—उन्हें उत्पादन कोड में प्रभावी ढंग से लागू करना दूसरी बात। यहीं पर यूनिट रूपांतरण आपकी परियोजनाओं में ठोस अंतर लाता है।

डिजाइन फाइलों को प्रतिक्रियाशील CSS में बदलना

आपको पिक्सेल में सब कुछ निर्दिष्ट किया गया Figma डिजाइन मिलता है। कार्ड घटक दर्शाता है:

पैडिंग: 24px
शीर्षक फॉन्ट आकार: 28px
मुख्य पाठ फॉन्ट आकार: 16px
निचला मार्जिन: 40px

इन्हें REM यूनिट में बदलना (16px रूट मानते हुए):

1.card {
2  padding: 1.5rem;        /* 24px → 1.5rem */
3  margin-bottom: 2.5rem;  /* 40px → 2.5rem */
4}
5
6.card__heading {
7  font-size: 1.75rem;     /* 28px → 1.75rem */
8}
9
10.card__body {
11  font-size: 1rem;        /* 16px → 1rem */
12}
13

लाभ क्या है? जब दृष्टि बाधित उपयोगकर्ता अपने ब्राउज़र के डिफ़ॉल्ट फॉन्ट आकार को 16px से 20px तक बढ़ाता है, तो आपका कार्ड अनुपातिक रूप से बढ़ता है। पैडिंग, मार्जिन और पाठ सभी 25% बढ़ जाते हैं, डिजाइन के दृश्य संतुलन को बनाए रखते हुए। पिक्सेल मानों के साथ, केवल पाठ बढ़ेगा, जिससे लेआउट टूट जाएगा।

सुलभ घटक पुस्तकालय बनाना

घटक पुस्तकालयों को किसी भी आकार में काम करने वाले बटन की आवश्यकता होती है—छोटे, मध्यम, बड़े। पैडिंग के लिए EM यूनिट का उपयोग स्व-अंतर्निहित स्केलिंग बनाता है:

1.button {
2  /* 16px फॉन्ट आकार पर बेस बटन */
3  font-size: 1rem;
4  padding: 0.75em 1.5em;  /* बेस आकार पर 12px 24px */
5  border: 1px solid currentColor;
6  border-radius: 0.25em;
7}
8
9.button--large {
10  font-size: 1.25rem;  /* 20px */
11  /* पैडिंग स्वचालित रूप से 15px 30px (0.75em × 20px) बन जाता है */
12}
13
14.button--small {
15  font-size: 0.875rem;  /* 14px */
16  /* पैडिंग स्वचालित रूप से 10.5px 21px (0.75em × 14px) बन जाता है */
17}
18

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

(पूरा अनुवाद जारी रहेगा...)

सीएसएस इकाइयों का विकास: निश्चित से लचीले तक

वेब के स्थिर दस्तावेजों से प्रतिक्रियाशील अनुप्रयोगों की यात्रा पिक्सेल से सापेक्ष इकाइयों में बदलाव को दर्शाता है। इस इतिहास को समझने से पता चलता है कि आज हम इकाइयों के बीच क्यों परिवर्तन करते हैं।

पिक्सेल-परफेक्ट युग (1990 के दशक-2000 के दशक)

प्रारंभिक वेबसाइटें विशिष्ट स्क्रीन चौड़ाइयों के लिए डिज़ाइन की गई थीं—640px, फिर 800px, फिर 1024px। सीएसएस लेआउट ने पिक्सेल का विशेष रूप से उपयोग किया क्योंकि यही प्रिंट डिजाइनर समझते थे। साइटें ब्राउज़र में समान दिखती थीं (जब वे काम करती थीं), लेकिन अप्रत्याशित स्क्रीन आकारों पर पूरी तरह से टूट जाती थीं। वेब को प्रिंट की तरह माना जाता था: निश्चित, नियंत्रित, पूर्वानुमान योग्य।

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

मोबाइल जागरूकता का अलार्म (2007-2010)

आईफोन ने सब कुछ बदल दिया। अचानक, यातायात का एक महत्वपूर्ण हिस्सा 320px-चौड़ी स्क्रीन से आया। पिंच-टू-ज़ूम ने मदद की, लेकिन 1024px डेस्कटॉप के लिए डिज़ाइन की गई वेबसाइटें मोबाइल पर पीड़ादायक थीं।

एथन मार्कोट का 2010 का लेख प्रतिक्रियाशील वेब डिजाइन पर एक नए दृष्टिकोण को स्पष्ट करता है: तरल ग्रिड, लचीली छवियां, और मीडिया क्वेरीज। सापेक्ष इकाइयां आवश्यक हो गईं, वैकल्पिक नहीं। लेकिन ईएम इकाइयों के संचयी व्यवहार ने जटिल लेआउट में बग पैदा किए।

आरईएम इकाइयां बचाव करती हैं (2010-वर्तमान)

सीएसएस3 ने 2010 के आसपास आरईएम इकाई पेश की, जिसने ईएम की सबसे बड़ी समस्या को हल किया: संचयी। आरईएम ने हमें विरासत जटिलता के बिना सापेक्ष स्केलिंग दी। इंटरनेट एक्सप्लोरर 9 ने 2011 में समर्थन जोड़ा, और 2015 तक, आरईएम इकाइयां मुख्यधारा में थीं।

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

यह विकास—कठोर पिक्सेल से लचीली सापेक्ष इकाइयों तक—उपयोगकर्ता की अपेक्षाओं को दर्शाता है जो "वेबसाइटों को हर जगह एक जैसा दिखना चाहिए" से बदलकर "वेबसाइटों को हर जगह अच्छी तरह काम करना चाहिए" हो गई हैं।

यूनिट रूपांतरण के लिए कोड उदाहरण

जावास्क्रिप्ट यूनिट कन्वर्टर फ़ंक्शन

1// PX, REM, और EM यूनिट्स के बीच रूपांतरण
2const pxToRem = (px, rootFontSize = 16) => {
3  return px / rootFontSize;
4};
5
6const pxToEm = (px, parentFontSize = 16) => {
7  return px / parentFontSize;
8};
9
10const remToPx = (rem, rootFontSize = 16) => {
11  return rem * rootFontSize;
12};
13
14const emToPx = (em, parentFontSize = 16) => {
15  return em * parentFontSize;
16};
17
18const remToEm = (rem, rootFontSize = 16, parentFontSize = 16) => {
19  return rem * (rootFontSize / parentFontSize);
20};
21
22const emToRem = (em, parentFontSize = 16, rootFontSize = 16) => {
23  return em * (parentFontSize / rootFontSize);
24};
25
26// उपयोग का उदाहरण
27console.log(pxToRem(24));  // 1.5
28console.log(remToPx(1.5)); // 24
29console.log(pxToEm(24, 24)); // 1
30console.log(remToEm(2, 16, 32)); // 1
31

यूनिट रूपांतरण के लिए CSS कस्टम प्रॉपर्टीज

1:root {
2  /* आधार फ़ॉन्ट आकार */
3  --root-font-size: 16px;
4  --base-font-size: var(--root-font-size);
5  
6  /* पिक्सेल मानों को REM में परिवर्तित किया गया */
7  --space-4px: 0.25rem;
8  --space-8px: 0.5rem;
9  --space-16px: 1rem;
10  --space-24px: 1.5rem;
11  --space-32px: 2rem;
12  --space-48px: 3rem;
13  
14  /* टाइपोग्राफी स्केल */
15  --text-xs: 0.75rem;    /* 12px */
16  --text-sm: 0.875rem;   /* 14px */
17  --text-base: 1rem;     /* 16px */
18  --text-lg: 1.125rem;   /* 18px */
19  --text-xl: 1.25rem;    /* 20px */
20  --text-2xl: 1.5rem;    /* 24px */
21}
22
23/* उपयोग का उदाहरण */
24.card {
25  padding: var(--space-16px);
26  margin-bottom: var(--space-24px);
27  font-size: var(--text-base);
28}
29
30.card-title {
31  font-size: var(--text-xl);
32  margin-bottom: var(--space-8px);
33}
34

यूनिट रूपांतरण के लिए SCSS मिक्सिन

1// यूनिट रूपांतरण के लिए SCSS फ़ंक्शन
2@function px-to-rem($px, $root-font-size: 16) {
3  @return ($px / $root-font-size) * 1rem;
4}
5
6@function px-to-em($px, $parent-font-size: 16) {
7  @return ($px / $parent-font-size) * 1em;
8}
9
10@function rem-to-px($rem, $root-font-size: 16) {
11  @return $rem * $root-font-size * 1px;
12}
13
14// उपयोग का उदाहरण
15.element {
16  padding: px-to-rem(20);
17  margin: px-to-rem(32);
18  font-size: px-to-rem(18);
19  
20  .nested {
21    // पैरेंट फ़ॉन्ट आकार (18px) का उपयोग करके em रूपांतरण
22    padding: px-to-em(16, 18);
23    margin-bottom: px-to-em(24, 18);
24  }
25}
26

पाइथन यूनिट कन्वर्टर

1def px_to_rem(px, root_font_size=16):
2    """पिक्सेल को REM यूनिट्स में परिवर्तित करें"""
3    return px / root_font_size
4
5def rem_to_px(rem, root_font_size=16):
6    """REM यूनिट्स को पिक्सेल में परिवर्तित करें"""
7    return rem * root_font_size
8
9def px_to_em(px, parent_font_size=16):
10    """पिक्सेल को EM यूनिट्स में परिवर्तित करें"""
11    return px / parent_font_size
12
13def em_to_px(em, parent_font_size=16):
14    """EM यूनिट्स को पिक्सेल में परिवर्तित करें"""
15    return em * parent_font_size
16
17# उपयोग का उदाहरण
18print(f"16px = {px_to_rem(16)}rem")  # 16px = 1.0rem
19print(f"2rem = {rem_to_px(2)}px")    # 2rem = 32px
20print(f"24px = {px_to_em(24, 16)}em")  # 24px = 1.5em
21

सीएसएस यूनिट्स को कनवर्ट करते समय सामान्य गलतियां

सैकड़ों कोडबेस की समीक्षा करने के बाद, मैंने देखा है कि ये गलतियां बार-बार आती हैं। इन्हें टालने से आपको डीबगिंग समय बचेगा।

गलती 1: कस्टम रूट फॉन्ट साइज को ध्यान में न रखना

समस्या: आप 24px को 1.5rem में कनवर्ट करते हैं, यह मानते हुए कि डिफ़ॉल्ट 16px रूट फॉन्ट साइज है, लेकिन आपकी परियोजना html { font-size: 62.5%; } का उपयोग करती है, जो रूट को 10px बनाता है। आपका एलिमेंट 24px की जगह 15px में समाप्त होता है।

समाधान: हमेशा कनवर्ट करने से पहले अपनी परियोजना के वास्तविक रूट फॉन्ट साइज की जांच करें। कनवर्टर के रूट फॉन्ट साइज को अपनी परियोजना की वास्तविकता से मेल खाने के लिए सेट करें।

गलती 2: नेस्टेड कंपोनेंट्स में टाइपोग्राफी के लिए ईएम यूनिट्स का उपयोग करना

समस्या: आप एक कार्ड कंपोनेंट बनाते हैं जिसमें हेडिंग्स के लिए font-size: 1.2em है। बढ़िया काम करता है। फिर आप एक कार्ड को दूसरे कार्ड के अंदर नेस्ट करते हैं, और अचानक आंतरिक कार्ड की हेडिंग 1.44em (1.2 × 1.2) हो जाती है, न कि 1.2em।

समाधान: जब तक आप विशेष रूप से कास्केडिंग व्यवहार नहीं चाहते, टाइपोग्राफी के लिए रेम यूनिट्स का उपयोग करें। स्थानीय फॉन्ट साइज के साथ स्केल होने वाली स्पेसिंग के लिए ईएम यूनिट्स को आरक्षित रखें।

गलती 3: बॉर्डर की चौड़ाई को रेम में कनवर्ट करना

समस्या: आप सुसंगतता के लिए border: 1px को border: 0.0625rem में कनवर्ट करते हैं। जब उपयोगकर्ता ज़ूम करते हैं या फॉन्ट साइज बदलते हैं, तो आपके बॉर्डर मोटे और बदसूरत हो जाते हैं।

समाधान: बॉर्डर को पिक्सल में रखें। सब-पिक्सल बॉर्डर (0.5px) में ब्राउज़र समर्थन असंगत है, और बॉर्डर को शायद ही कभी टेक्स्ट के साथ स्केल करने की आवश्यकता होती है।

गलती 4: मीडिया क्वेरी यूनिट्स उपयोगकर्ता वरीयताओं को संदर्भित करना भूलना

समस्या: आप टैबलेट ब्रेकपॉइंट के लिए @media (min-width: 768px) लिखते हैं। जो उपयोगकर्ता बड़ा डिफ़ॉल्ट फॉन्ट साइज सेट करते हैं, उन्हें टैबलेट लेआउट नहीं मिलता जब उन्हें मिलना चाहिए।

समाधान: मीडिया क्वेरी में ईएम या रेम यूनिट्स का उपयोग करें: @media (min-width: 48em). यह उपयोगकर्ता फॉन्ट वरीयताओं का सम्मान करता है, जैसा कि एमडीएन प्रतिक्रियाशील डिजाइन दस्तावेज़ीकरण में अनुशंसित है।

गलती 5: गणना विधियों को मिश्रित करना

समस्या: आपका सास एक गणना विधि का उपयोग करता है, आपका जावास्क्रिप्ट दूसरी का, और आपकी मानसिक गणना तीसरी का। परिणाम मेल नहीं खाते, जिससे पिक्सल-पुशिंग में निराशा होती है।

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

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

REM और EM इकाइयों के बीच क्या अंतर है?

संदर्भ बिंदु पूरी तरह से अलग होता है। REM इकाइयां हमेशा रूट <html> तत्व के फॉन्ट आकार को देखती हैं—चाहे आपका तत्व कितना भी गहराई से नेस्टेड हो, 1rem समान कंप्यूटेड मान के बराबर होता है। EM इकाइयां अपने तत्काल पैरेंट के फॉन्ट आकार को देखती हैं, जो एक कास्केडिंग प्रभाव बनाता है।

इसे इस तरह से सोचें: यदि आप तीन <div> तत्वों को नेस्ट करते हैं, जिनमें से प्रत्येक में font-size: 1.2em है, तो सबसे आंतरिक div का पाठ आपकी अपेक्षा से काफी बड़ा होगा क्योंकि प्रत्येक स्तर गुणा को जोड़ता है। प्रत्येक स्तर पर font-size: 1.2rem के साथ, तीनों div समान फॉन्ट आकार के होते हैं क्योंकि वे सभी रूट को संदर्भित करते हैं।

यही कारण है कि ब्राउज़र समर्थन में सुधार होने के बाद REM टाइपोग्राफी के लिए लोकप्रिय हो गया—यह विरासत श्रृंखलाओं को ट्रैक करने के मानसिक बोझ को समाप्त करता है।

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

कोई एक इकाई हर स्थिति में नहीं जीतती। सबसे अच्छी रिस्पॉन्सिव डिजाइन इकाइयों को रणनीतिक रूप से संयोजित करती हैं:

REM का उपयोग करें: वैश्विक स्पेसिंग, टाइपोग्राफी स्केल, कंपोनेंट अंतराल, और कोई भी माप जो उपयोगकर्ता के फॉन्ट वरीयताओं के साथ स्केल होना चाहिए

EM का उपयोग करें: कंपोनेंट-आंतरिक स्पेसिंग (बटन पैडिंग, कार्ड अंतराल), मीडिया क्वेरीज (जो उपयोगकर्ता वरीयताओं का सम्मान करती हैं), और तत्व जो अपने स्थानीय संदर्भ के साथ स्केल होने चाहिए

पिक्सेल का उपयोग करें: 1px बॉर्डर (वे स्पष्ट दिखते हैं), बॉक्स-शैडो (सूक्ष्म शैडो को सटीकता की आवश्यकता होती है), और SVG स्ट्रोक चौड़ाई

प्रतिशत या व्यूपोर्ट इकाइयों का उपयोग करें: कंटेनर चौड़ाई, पूर्ण-ऊंचाई अनुभाग

मैंने कोडबेस देखे हैं जो हर जगह एक ही इकाई का उपयोग करने का प्रयास करते हैं—यह हमेशा रखरखाव की परेशानियां पैदा करता है। प्रत्येक इकाई का उपयोग वहां करें जहां यह सबसे अधिक लाभ प्रदान करता है।

(अनुवाद जारी रहेगा...)

संदर्भ और आगे पढ़ने के लिए

"CSS मान और इकाई मॉड्यूल स्तर 3." W3C अनुशंसा। https://www.w3.org/TR/css-values-3/
मार्कोट, एथन। "प्रतिक्रियाशील वेब डिजाइन।" ए लिस्ट अपार्ट, 25 मई, 2010। https://alistapart.com/article/responsive-web-design/
रटर, रिचर्ड। "टाइपोग्राफिक शैली के तत्व वेब पर लागू।" http://webtypography.net/
"CSS इकाइयाँ।" MDN वेब डॉक्स। https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units
"CSS पिक्सेल बनाम भौतिक पिक्सेल।" स्टैक ओवरफ्लो दस्तावेजीकरण। https://stackoverflow.com/questions/8785643/what-exactly-is-the-difference-between-css-pixels-and-device-pixels
कोयर, क्रिस। "CSS की लंबाइयाँ।" CSS-ट्रिक्स। https://css-tricks.com/the-lengths-of-css/
"CSS कस्टम गुणों (चर) का उपयोग करना।" MDN वेब डॉक्स। https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
"CSS में rem इकाइयों को समझना और उपयोग करना।" साइटपॉइंट। https://www.sitepoint.com/understanding-and-using-rem-units-in-css/

सीएसएस इकाइयों को सटीक रूप से कनवर्ट करना शुरू करें

मैनुअल सीएसएस इकाई रूपांतरण थकाऊ और त्रुटि-प्रवण होता है। आप मानसिक गणना कर रहे हैं, गणनाओं पर संदेह कर रहे हैं, और उम्मीद कर रहे हैं कि फॉन्ट आकार सही हैं। यह पीएक्स से आरईएम से ईएम कनवर्टर उस घर्षण को समाप्त करता है।

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

पहुंच-योग्य साइटों पर काम करने वाले डेवलपर्स के लिए, यह टूल सुनिश्चित करने में मदद करता है कि आपकी लेआउट सही ढंग से स्केल हों जब उपयोगकर्ता अपनी फॉन्ट वरीयताएं समायोजित करते हैं—WCAG 2.1 स्तर AA के तहत एक आवश्यकता। घटक पुस्तकालय बनाने वालों के लिए, यह स्पष्ट करता है कि कौन से ईएम मान आप चाहते हैं। किसी भी व्यक्ति के लिए जो फिगमा डिजाइन को उत्पादन सीएसएस में अनुवादित कर रहा है, यह रूपांतरण वर्कफ्लो को काफी तेज करता है।

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