px से rem/em कन्वर्टर

यह टूल क्या करता है

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

px, rem और em में क्या फ़र्क़ है

px एक तय लंबाई है — जो मान डालें, वही रहता है। rem पूरे पेज के रूट फ़ॉन्ट आकार के हिसाब से नापी जाती है, इसलिए जब रूट 16px हो तो 1rem का मतलब 16px होता है। वहीं em उस एलिमेंट के अपने फ़ॉन्ट आकार के हिसाब से नापी जाती है जिसमें वह लिखी गई है, यानी यह हर जगह एक जैसी नहीं रहती। फ़ॉन्ट आकार और स्पेसिंग को rem में रखने का फ़ायदा यह है कि जब पाठक अपने ब्राउज़र का डिफ़ॉल्ट फ़ॉन्ट आकार बदलता है, तो पूरा लेआउट उसी अनुपात में घटता-बढ़ता है, फ़िक्स px की तरह अड़ा नहीं रहता।

रूट फ़ॉन्ट आकार का असर rem वैल्यू पर

टूल में रूट फ़ॉन्ट आकार (px) का डिफ़ॉल्ट मान 16px है, और शुरुआत में 16px, 1rem और 1em तीनों बराबर होते हैं। इसी मान पर टूल की "आम px → rem (16px root)" तालिका बनी है, जो सबसे सामान्य px मानों के rem बराबर एक झलक में दिखाती है — जैसे इसी 16px आधार पर 32px का मतलब 2rem होगा और 8px का मतलब 0.5rem, क्योंकि दोनों उसी 16px वाले अनुपात में बदले जाते हैं। अगर आपके प्रोजेक्ट का रूट फ़ॉन्ट आकार 16px से अलग है, तो रूट फ़ॉन्ट आकार (px) वाली फ़ील्ड में अपना मान भर दें — हर rem वैल्यू उसी हिसाब से तुरंत अपडेट हो जाएगी। रूट फ़ॉन्ट आकार की फ़ील्ड में 0 से बड़ी कोई भी संख्या ही मान्य है।

em संदर्भ फ़ॉन्ट आकार अलग से क्यों चाहिए

em हमेशा पेज के रूट के हिसाब से नहीं, बल्कि उस एलिमेंट के अपने फ़ॉन्ट आकार के हिसाब से तय होती है जिसमें वह इस्तेमाल हो रही है — और यह फ़ॉन्ट आकार रूट से अलग भी हो सकता है। इसीलिए टूल em संदर्भ फ़ॉन्ट आकार (px) के लिए एक अलग फ़ील्ड देता है, जिसका डिफ़ॉल्ट मान भी 16px है। सही em पाने के लिए इसमें उसी एलिमेंट का फ़ॉन्ट आकार डालें जिसके लिए आप हिसाब लगा रहे हैं; अगर वह एलिमेंट रूट जैसा ही फ़ॉन्ट आकार इस्तेमाल करता है, तो इस फ़ील्ड को रूट के बराबर ही रहने दें। इस फ़ील्ड में भी 0 से बड़ी संख्या ही मान्य है।

टूल इस्तेमाल करने का तरीक़ा

तीन इनपुट फ़ील्ड हैं — रूट फ़ॉन्ट आकार (px), em संदर्भ फ़ॉन्ट आकार (px), और मान। मान फ़ील्ड में px, rem या em — जो भी यूनिट आपके पास है, वही डालें; टाइप करते ही बाकी दो यूनिट अपने आप अपडेट होती रहती हैं, यानी किसी अलग बटन को दबाने की ज़रूरत नहीं है। यही व्यवहार रूट फ़ॉन्ट आकार या em संदर्भ फ़ॉन्ट आकार बदलने पर भी लागू होता है — इन्हें बदलते ही मान फ़ील्ड में दिख रहे नतीजे उसी नए आधार पर फिर से गिने जाते हैं। टूल निगेटिव पिक्सल मान भी स्वीकार करता है, तो जिन जगहों पर आपको ऋणात्मक मार्जिन जैसी वैल्यू का हिसाब लगाना हो, वहां भी यह काम करता है।

ग़लत मान डालने पर मिलने वाले मैसेज

अगर मान फ़ील्ड में कोई ऐसी चीज़ डाली जाए जो संख्या ही न हो, तो टूल यह संदेश दिखाता है: "बदलने के लिए कोई संख्या डालें।" रूट फ़ॉन्ट आकार (px) फ़ील्ड में 0 या उससे छोटा या ग़ैर-संख्यात्मक मान डालने पर संदेश आता है: "Root font size 0 से बड़ी संख्या होनी चाहिए।" इसी तरह em संदर्भ फ़ॉन्ट आकार (px) फ़ील्ड में अमान्य मान डालने पर संदेश दिखता है: "em context font size 0 से बड़ी संख्या होनी चाहिए।" ये संदेश तुरंत बता देते हैं कि किस फ़ील्ड में सुधार चाहिए, तो आपको ग़लती ढूंढ़ने में समय नहीं गंवाना पड़ता।

डेटा प्राइवेसी

हर रूपांतरण आपके अपने ब्राउज़र में ही होता है। आप जो भी मान टाइप करते हैं, वह BroBroGo पर अपलोड नहीं होता।

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

अगर मैं मान फ़ील्ड में px भरूं तो rem और em कैसे मिलते हैं? टाइप करते ही टूल उसी वक़्त रूट फ़ॉन्ट आकार और em संदर्भ फ़ॉन्ट आकार के आधार पर rem और em निकालकर दिखा देता है — किसी अलग "कन्वर्ट" बटन की ज़रूरत नहीं।

रूट फ़ॉन्ट आकार और em संदर्भ फ़ॉन्ट आकार का डिफ़ॉल्ट मान क्या है? दोनों का डिफ़ॉल्ट मान 16px है, और इसी वजह से टूल खोलते ही 16px, 1rem और 1em तीनों बराबर दिखते हैं।

क्या यह टूल निगेटिव px वैल्यू स्वीकार करता है? हां, टूल निगेटिव पिक्सल मान भरने देता है और उसी हिसाब से rem व em निकाल देता है।

अगर रूट फ़ॉन्ट आकार 16px से अलग रखना है तो क्या करना होगा? रूट फ़ॉन्ट आकार (px) फ़ील्ड में अपना मान डाल दें; बदलते ही मान फ़ील्ड में दिख रहे सभी rem नतीजे उसी नए आधार पर फिर से अपडेट हो जाते हैं।

अगर रूट फ़ॉन्ट आकार या em संदर्भ फ़ॉन्ट आकार में 0 या ग़ैर-संख्यात्मक मान डाल दूं तो? टूल उस फ़ील्ड के लिए साफ़ चेतावनी दिखा देता है, जैसे "Root font size 0 से बड़ी संख्या होनी चाहिए।" या "em context font size 0 से बड़ी संख्या होनी चाहिए।", ताकि आप सही मान भरकर आगे बढ़ सकें।