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

Q: REM आणि EM युनिट्समध्ये काय फरक आहे?

संदर्भ बिंदू पूर्णपणे वेगवेगळा असतो. REM युनिट्स नेहमी रूट एलिमेंटच्या फॉन्ट साइजकडे पाहतात—तुमचा एलिमेंट किती खोलवर नेस्टेड असला तरी, 1rem हा समान संगणित मूल्याला समान असतो. EM युनिट्स त्यांच्या तात्काळ पालक एलिमेंटच्या फॉन्ट साइजकडे पाहतात, जे एक कास्केडिंग प्रभाव निर्माण करते. असे समजा: जर तुम्ही तीन एलिमेंट्स नेस्ट केले, प्रत्येकाचा font-size: 1.2em असेल, तर आतील div चा मजकूर अपेक्षेपेक्षा लक्षणीयरित्या मोठा असेल कारण प्रत्येक स्तर गुणाकार करतो. font-size: 1.2rem असल्यास प्रत्येक स्तरावर, तीन divs समान फॉन्ट साइजचे असतील कारण ते सर्व रूटला संदर्भित करतात. हेच कारण आहे की ब्राउझर समर्थन सुधारल्यानंतर REM टायपोग्राफीसाठी लोकप्रिय झाला—हे वारसा साखळ्यांचा मानसिक ओझा काढून टाकते.

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

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

पिक्सेल (पीएक्स), रूट ईएम (आरईएम) आणि ईएम (ईएम) एकक यांच्यात रूपांतर करा. कोणत्याही क्षेत्रात मूल्य प्रविष्ट करून इतर एककांमध्ये समतुल्य मूल्य पहा.

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

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

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

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

rem

ईएम

नकारात्मक किंवा शून्य मूल्यांसाठी दृश्य तुलना उपलब्ध नाही

रूपांतर सूत्र

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

लोडिंग कॅलक्युलेटर...

📚

साहित्यिकरण

पीएक्स, आरईएम आणि ईएम युनिट कन्व्हर्टर: महत्त्वपूर्ण सीएसएस युनिट्स समजावून सांगणे

आधुनिक वेब विकासासाठी CSS युनिट रूपांतरण महत्त्वाचे का आहे

जेव्हा आपण प्रतिसादात्मक वेबसाइट्स तयार करत असता, सर्वात सामान्य आव्हानांपैकी एक म्हणजे डिझाइन स्पेसिफिकेशन्सचे लवचीक, स्केलेबल CSS मध्ये रूपांतर करणे. आपण बहुधा Figma डिझाइनमध्ये "padding: 24px" पाहिले असेल आणि विचार केला असेल की पिक्सेल्स म्हणून ठेवावे की rem युनिट्समध्ये रूपांतरित करावे. ही निर्णय सर्वकाही प्रभावित करतो - ॲक्सेसिबिलिटी पासून ते कसे तुमचे लेआउट वापरकर्त्याच्या ब्राउझरच्या फॉन्ट आकाराला प्रतिसादात्मक असते.

हा PX, REM, आणि EM युनिट कन्व्हर्टर आपल्याला या तीन मूलभूत CSS युनिट्समध्ये त्वरित रूपांतर करण्यास मदत करतो. पिक्सेल्स आपल्याला अचूक नियंत्रण देतात - बॉर्डर्स आणि सूक्ष्म तपशीलांसाठी उत्कृष्ट. REM युनिट्स मूल फॉन्ट आकाराबरोबर स्केल होतात, ज्यामुळे ते संपूर्ण साइटवर सुसंगत अंतर आणि टायपोग्राफी साठी आदर्श ठरतात. EM युनिट्स त्यांच्या पालक तत्वाच्या संदर्भात स्केल होतात, स्वयंपूर्ण घटक तयार करण्यासाठी परिपूर्ण जे त्यांचे अनुपात राखतात.

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

CSS युनिट्स समजून घेणे: PX, REM, आणि EM

पिक्सेल्स (PX) काय असतात?

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

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 युनिट्स कधी चमकतात:

घटक-आधारित डिझाइन: फॉन्ट आकारासह स्केल होणारे पॅडिंग आणि मार्जिन
टायपोग्राफी: लाइन उंची बिनयुनिट किंवा ems सह चांगल्या रित्या काम करतात (जसे 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 वर सेट करा.

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

डिजाइनपासून कोडपर्यंत: आपल्या फिगमा फाइलमध्ये padding: 24px दाखवले आहे. आपण अधिक सुलभ प्रवेशासाठी रेम युनिट्स वापरू इच्छिता. 24 पीएक्स क्षेत्रात प्रविष्ट करा, आणि आपण पाहाल की ते 1.5 रेम बरोबर आहे (16px मूल मानून).

बटण घटक बनविणे: आपण बटणाच्या फॉन्ट आकारानुसार पॅडिंग स्केल करू इच्छिता. जर बटणाला font-size: 1.125rem (18px) असेल, पालक फॉन्ट आकार 18 वर सेट करा, आपल्या इच्छित पिक्सेल पॅडिंगला प्रविष्ट करा आणि निर्माण झालेले ईएम मूल्य वापरा.

प्रतिसादात्मक टायपोग्राफी: आपण एक हेडिंग तयार करत आहात जे डेस्कटॉपवर 32px आहे. 32px प्रविष्ट करा आणि पाहा की ते 2 रेम आहे, जे वापरकर्त्यांनी त्यांच्या ब्राउझरचा फॉन्ट आकार समायोजित केल्यास योग्यरित्या स्केल होईल.

वास्तविक जगातील 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

सीएसएस युनिट्स परिवर्तन करताना सामान्य चुका

शेकडो कोडबेसेस तपासल्यानंतर, मला या चुका वारंवार दिसल्या आहेत. त्यांचे टाळणे डीबगिंग वेळ वाचवेल.

चूक १: कस्टम रूट फॉन्ट आकारांचा विचार न करणे

समस्या: तुम्ही 24px ला 1.5rem मध्ये बदलता, असे समजून की डीफॉल्ट 16px रूट फॉन्ट आकार आहे, पण तुमच्या प्रोजेक्टमध्ये html { font-size: 62.5%; } वापरला जातो, जो रूटला 10px करतो. तुमचा एलिमेंट 24px ऐवजी 15px होतो.

उपाय: नेहमी परिवर्तन करण्यापूर्वी तुमच्या प्रोजेक्टचा वास्तविक रूट फॉन्ट आकार तपासा. कन्वर्टरचा रूट फॉन्ट आकार तुमच्या प्रोजेक्टच्या वास्तविकतेशी जुळवा.

चूक २: नेस्टेड कॉम्पोनेंट्समध्ये टायपोग्राफीसाठी ईएम युनिट्स वापरणे

समस्या: तुम्ही हेडिंग्ससाठी font-size: 1.2em असलेला कार्ड कॉम्पोनेंट बनवता. चांगले काम करते. मग तुम्ही एका कार्डाच्या आत दुसरा कार्ड ठेवता, आणि अचानक आतील कार्डाची हेडिंग 1.44em (1.2 × 1.2) होते, 1.2em नाही.

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

चूक ३: बॉर्डर रुंदाईचे रेम मध्ये परिवर्तन करणे

समस्या: सुसंगततेसाठी तुम्ही border: 1px ला border: 0.0625rem मध्ये बदलता. जेव्हा वापरक जूम करतात किंवा फॉन्ट आकार बदलतात, तेव्हा तुमचे बॉर्डर्स जाड आणि कुरूप होतात.

उपाय: बॉर्डर्स पिक्सेलमध्ये ठेवा. सब-पिक्सेल बॉर्डर्स (0.5px) चे ब्राउझर सपोर्टमध्ये असमानता आहे, आणि बॉर्डर्सना सहसा मजकुरासोबत स्केल करण्याची आवश्यकता नसते.

चूक ४: मीडिया क्वेरी युनिट्स वापरकर्ता प्राधान्यांचा संदर्भ विसरणे

समस्या: तुम्ही टॅबलेट ब्रेकपॉइंटसाठी @media (min-width: 768px) लिहिता. ज्या वापरकर्तांनी मोठा डीफॉल्ट फॉन्ट आकार ठेवला आहे, त्यांना टॅबलेट लेआउट मिळत नाही.

उपाय: मीडिया क्वेरीमध्ये ईएम किंवा रेम युनिट्स वापरा: @media (min-width: 48em). हे वापरकर्त्याच्या फॉन्ट प्राधान्यांचा सन्मान करते, एमडीएन रेस्पॉन्सिव्ह डिझाइन दस्तऐवजीकरणाने शिफारस केल्याप्रमाणे.

चूक ५: गणना पद्धती मिश्रित करणे

समस्या: तुमच्या सास मध्ये एक गणना पद्धत, जावास्क्रिप्ट मध्ये दुसरी, आणि तुमच्या मानसिक गणनेत तिसरी. परिणाम जुळत नाहीत, ज्यामुळे पिक्सेल-ढकलण्याचे नैराश्य येते.

उपाय: या कन्वर्टरला सत्याचा स्रोत म्हणून वापरा. बुकमार्क करा, कोड पुनरावलोकनादरम्यान त्याचा संदर्भ घ्या, आणि खात्री करा की तुमच्या टीममधील प्रत्येकजण समान परिवर्तन पद्धती वापरतो.

वारंवार विचारले जाणारे प्रश्न

REM आणि EM युनिट्समध्ये काय फरक आहे?

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

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

हेच कारण आहे की ब्राउझर समर्थन सुधारल्यानंतर 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/

CSS एकक रूपांतरण सुरू करा अचूकपणे

मॅन्युअल CSS एकक रूपांतरण कष्टाचे आणि त्रुटीपूर्ण असते. तुम्ही मानसिक गणित करत असता, गणनांबद्दल दुय्यम विचार करत असता आणि आशा करत असता की तुम्ही फॉन्ट आकार बरोबर घेतले आहेत. हा PX ते REM ते EM रूपांतरक त्या घर्षणाला काढून टाकतो.

आपल्या डिझाइन फाइलींतून पिक्सेल मूल्ये प्रविष्ट करा, फॉन्ट आकार आपल्या प्रकल्पाच्या कॉन्फिगरेशनशी जुळवा आणि लगेच अचूक REM आणि EM मूल्ये मिळवा. त्यांना थेट आपल्या कोडमध्ये कॉपी करा. तुम्ही नवीन डिझाइन सिस्टम अंमलात आणत असाल, अस्तित्वातील कोडबेसला सापेक्ष एकक देत असाल किंवा फक्त या एकक कसे संबंधित आहेत ते समजून घेत असाल, रूपांतरक गणित हाताळतो जेणेकरून तुम्ही बांधकामावर लक्ष केंद्रित करू शकाल.

ॲक्सेसिबिलिटी-अनुपालन साइट्स वर काम करणाऱ्या डेव्हलपर्ससाठी, हे साधन सुनिश्चित करते की तुमच्या लेआउट्स वापरकर्ते त्यांच्या फॉन्ट प्राधान्यांमध्ये बदल करताना योग्यरित्या स्केल होतात—WCAG 2.1 पातळी AA अंतर्गत एक आवश्यकता. घटक पुस्तकालये बांधणाऱ्यांसाठी, हे स्पष्ट करते की कोणते EM मूल्ये तुम्हाला इच्छित प्रमाण तयार करतात. फिगमा डिझाइन्स उत्पादन CSS मध्ये अनुवादित करणाऱ्या कोणाही व्यक्तीसाठी, हे रूपांतरण कार्यप्रवाहाला लक्षणीयरित्या वेग देते.

सूत्र W3C CSS मूल्य आणि एकक मॉड्यूल विनिर्देश वर आधारित आहेत, असे सुनिश्चित करून की रूपांतरणे ब्राउझर्स या मूल्यांची गणना करतात त्याप्रमाणे जुळतात.