PX से REM कनवर्टर

PX से REM सूत्र

rem = px / मूल-फॉन्ट-आकार

पिक्सेल (px) को rem में परिवर्तित करने के लिए, पिक्सेल मान को मूल फ़ॉन्ट-आकार से विभाजित करें।

नीचे दिया गया तालिका सामान्य px से rem रूपांतरण दिखाता है जो डिफ़ॉल्ट ब्राउज़र मूल फ़ॉन्ट-आकार 16px पर आधारित है। पिक्सेल मानों को स्केलेबल rem इकाइयों में परिवर्तित करते समय इसे त्वरित संदर्भ के रूप में उपयोग करें।

PX के बजाय REM का उपयोग क्यों करें?

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

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

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

REM का उपयोग करने के लिए सर्वोत्तम प्रथाएँ

अपने CSS में स्केलेबल और सुसंगत टाइपोग्राफी और स्पेसिंग बनाए रखने में <code>rem</code> इकाइयों का उपयोग मदद करता है। नीचे आधुनिक फ्रंटेंड विकास में rem के साथ काम करने के लिए सबसे विश्वसनीय सर्वोत्तम प्रथाएँ दी गई हैं।

• स्पष्ट मूल फ़ॉन्ट-आकार सेट करें: डिफ़ॉल्ट 16px रखें या इसे केवल तब ओवरराइड करें जब आपके डिज़ाइन सिस्टम को एक विशिष्ट स्केल की आवश्यकता हो।
• टाइपोग्राफी के लिए rem का उपयोग करें: rem में परिभाषित फ़ॉन्ट-आकार स्वचालित रूप से स्केल होते हैं जब उपयोगकर्ता ब्राउज़र सेटिंग्स को समायोजित करते हैं।
• स्पेसिंग के लिए rem का उपयोग करें: मार्जिन, पैडिंग और गैप्स अनुपात में रहते हैं जब वे समान मूल साझा करते हैं।
• बिना कारण px और rem को मिलाने से बचें: असंगत इकाइयाँ स्केलिंग को पूर्वानुमानित करना कठिन बनाती हैं।
• छोटी अपवादों के लिए केवल px का उपयोग करें: बॉर्डर्स, हेयरलाइन तत्व या पिक्सेल-परफेक्ट संरेखण।
• 10px को मजबूर करने के लिए प्रतिशत में मूल फ़ॉन्ट-आकार सेट करने से बचें: क्लासिक 62.5 प्रतिशत ट्रिक जटिलता जोड़ता है और सुलभता की अपेक्षाओं को तोड़ सकता है।
• ब्राउज़र ज़ूम और कस्टम फ़ॉन्ट-आकार के साथ परीक्षण करें: यह सुनिश्चित करता है कि आपका लेआउट सभी उपयोगकर्ताओं के लिए पठनीय बना रहे।

इन सर्वोत्तम प्रथाओं का पालन करने से आपका डिज़ाइन पूर्वानुमानित, सुलभ और ब्रेकपॉइंट्स और उपकरणों के बीच बनाए रखना आसान रहता है।

CSS में REM कैसे काम करता है

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

उदाहरण के लिए, यदि मूल फ़ॉन्ट-आकार 16px है, तो:

1rem = 16px

जब आप rem इकाइयों का उपयोग करके स्पेसिंग या टाइपोग्राफी परिभाषित करते हैं, तो ब्राउज़र अंतिम पिक्सेल मान की गणना मूल फ़ॉन्ट-आकार द्वारा rem मान को गुणा करके करता है। यह लेआउट समय के दौरान रेंडरिंग प्रक्रिया में होता है।

• मूल द्वारा नियंत्रित: सभी rem मान <code>html</code> तत्व पर सेट किए गए फ़ॉन्ट-आकार को संदर्भ के रूप में उपयोग करते हैं।
• उपयोगकर्ता सेटिंग्स का सम्मान करता है: यदि कोई उपयोगकर्ता सुलभता के लिए ब्राउज़र का डिफ़ॉल्ट फ़ॉन्ट-आकार बढ़ाता है, तो सभी rem-आधारित मान स्वचालित रूप से स्केल होते हैं।
• माता-पिता द्वारा प्रभावित नहीं होता: rem गहराई से नेस्टेड घटकों के अंदर भी स्थिर रहता है, em के विपरीत।
• आसान वैश्विक स्केलिंग: मूल फ़ॉन्ट-आकार को बदलने से पूरे डिज़ाइन सिस्टम को संपादित किए बिना समायोजित किया जा सकता है।

संक्षेप में, rem CSS में आकार के लिए एकल सत्य का स्रोत प्रदान करता है, यही कारण है कि इसका उपयोग अधिकांश आधुनिक डिज़ाइन सिस्टम और UI ढांचों में किया जाता है।

REM का उपयोग कैसे करें

<code>rem</code> इकाइयों का उपयोग करना आपके प्रोजेक्ट में सीधा है। मुख्य विचार एक स्पष्ट मूल फ़ॉन्ट-आकार को परिभाषित करना है और फिर टाइपोग्राफी, स्पेसिंग और लेआउट तत्वों के लिए rem का लगातार उपयोग करना है। इससे आपका पूरा डिज़ाइन स्केलेबल और पूर्वानुमानित रहता है।

1. मूल फ़ॉन्ट-आकार सेट करें

अधिकांश प्रोजेक्ट ब्राउज़र के डिफ़ॉल्ट 16px को बनाए रखते हैं। यदि आप स्पष्ट होना चाहते हैं तो आप इसे सीधे सेट कर सकते हैं:

html {
  font-size: 16px;
}

यदि आपका डिज़ाइन सिस्टम एक अलग स्केल का उपयोग करता है, तो आप इसे यहाँ समायोजित कर सकते हैं। प्रत्येक rem मान इस संख्या पर आधारित होगा।

2. rem का उपयोग करके फ़ॉन्ट आकार परिभाषित करें

h1 {
  font-size: 2rem;
}

p {
  font-size: 1rem;
}

small {
  font-size: 0.875rem;
}

यह सुनिश्चित करता है कि जब मूल आकार बदलता है, तो सभी पाठ एक साथ स्केल होते हैं।

3. स्पेसिंग के लिए rem का उपयोग करें

button {
  padding: 0.75rem 1.25rem;
  margin-top: 1rem;
}

जब स्पेसिंग rem का उपयोग करती है, तो आपके लेआउट के अनुपात सुसंगत रहते हैं।

4. केवल छोटे निश्चित मानों के लिए px का उपयोग करें

बॉर्डर्स, 1px रेखाएँ या तेज UI विवरण अभी भी px में बेहतर होते हैं:

button {
  border: 1px solid #ccc;
}

5. विभिन्न ब्राउज़र फ़ॉन्ट आकारों के साथ परीक्षण करें

पृष्ठ को ज़ूम करें या ब्राउज़र का डिफ़ॉल्ट फ़ॉन्ट-आकार बदलें। यदि आपका लेआउट साफ-सुथरा स्केल होता है, तो आप rem का सही उपयोग कर रहे हैं।

एक स्थिर मूल आकार को लगातार rem उपयोग के साथ मिलाकर, आपको एक ऐसा लेआउट मिलता है जो आधुनिक उपकरणों और स्क्रीन आकारों के बीच सुलभ और बनाए रखना आसान होता है।

संबंधित कनवर्टर्स:

• REM to PX कन्वर्टर

  तुरंत rem से पिक्सेल की गणना करें

• EM to PX कन्वर्टर

  तुरंत em से पिक्सेल की गणना करें

• PX to EM कन्वर्टर

  तुरंत पिक्सेल से em की गणना करें

• VH to PX कन्वर्टर

  तुरंत vh से पिक्सेल की गणना करें

• PX to VW कन्वर्टर

  तुरंत पिक्सेल से vw की गणना करें

• PX to Percent कन्वर्टर

  तुरंत पिक्सेल से प्रतिशत की गणना करें