CSS यूनिट कन्वर्टर — px, rem, em, pt, % ऑनलाइन
px, rem, em, pt या % में कोई भी CSS वैल्यू दर्ज करें और अन्य सभी यूनिट्स में इक्विवलेंट तुरंत देखें। सटीक rem और em कन्वर्शन के लिए कस्टम बेस फॉन्ट साइज़ (डिफ़ॉल्ट 16px) सेट करें। सभी कैलकुलेशन पेज रिलोड किए बिना रियल टाइम में अपडेट होती हैं।
बेस: 16px। rem/em के लिए, 1 यूनिट = रूट लेवल पर 16px।
कैसे काम करता है
रिस्पॉन्सिव डिजाइन में CSS यूनिट्स क्यों जरूरी हैं
CSS दो प्रमुख लेंथ यूनिट कैटेगरी प्रदान करता है: एब्सोल्यूट (px, pt, cm, mm) और रिलेटिव (rem, em, %, vw, vh)। एब्सोल्यूट यूनिट्स का कॉन्टेक्स्ट से स्वतंत्र एक निश्चित फिज़िकल साइज़ होता है; रिलेटिव यूनिट्स किसी और चीज़ के सापेक्ष स्केल होती हैं — रूट फॉन्ट साइज़, पैरेंट एलिमेंट का फॉन्ट साइज़ या व्यूपोर्ट डाइमेंशन। सही यूनिट टाइप चुनने से यह तय होता है कि आपका लेआउट विभिन्न स्क्रीन साइज़, यूज़र फॉन्ट प्रेफरेंस और ज़ूम लेवल के अनुसार कितनी अच्छी तरह अडाप्ट होता है।
पिक्सेल (px) सबसे आम CSS यूनिट है क्योंकि यह प्रेडिक्टेबल और प्रिसाइज है, लेकिन यह यूज़र के ब्राउज़र फॉन्ट साइज़ सेटिंग का सम्मान नहीं करता। एक यूज़र जिसने एक्सेसिबिलिटी के लिए अपना डिफ़ॉल्ट फॉन्ट साइज़ 20px किया है, px-बेस्ड टेक्स्ट अनचेंज्ड रहता है, जबकि rem-बेस्ड टेक्स्ट उसी के अनुसार स्केल होता है। इसीलिए WCAG 2.1 सक्सेस क्राइटेरिया 1.4.4 (Resize Text) फॉन्ट साइज़ के लिए rem जैसी रिलेटिव यूनिट्स उपयोग करने से सबसे आसानी से पूरा होता है।
px बनाम rem बनाम em: कब क्या इस्तेमाल करें
rem (रूट em) रूट एलिमेंट के फॉन्ट साइज़ के सापेक्ष है — सभी ब्राउज़रों में डिफ़ॉल्ट 16px। चूंकि rem एक फिक्स्ड रेफरेंस पॉइंट (<html> एलिमेंट) पर एंकर है, यह em के कंपाउंडिंग इफेक्ट से बचाता है। फॉन्ट साइज़, कंपोनेंट स्पेसिंग और किसी भी वैल्यू के लिए rem का उपयोग करें जो यूज़र फॉन्ट प्रेफरेंस के साथ स्केल होनी चाहिए। टिपिकल फॉर्मूला: rem = px ÷ बेस, जैसे 24px ÷ 16 = 1.5rem।
em वर्तमान एलिमेंट के फॉन्ट साइज़ के सापेक्ष है, जो खुद em में सेट हो सकता है — एक कंपाउंडिंग चेन बनाता है। `font-size: 1.2em` वाले पैरेंट के अंदर चाइल्ड पर `font-size: 1.2em` रूट साइज़ का 1.44 गुना परिणाम देता है (1.2 × 1.2)। यह em को कंपोनेंट के अंदर लोकल फॉन्ट साइज़ के साथ स्केल होने वाली स्पेसिंग (padding और margin) के लिए उपयोगी बनाता है, लेकिन ग्लोबल लेआउट के लिए प्रेडिक्ट करना मुश्किल है। pt (पॉइंट्स) मुख्य रूप से प्रिंट के लिए उपयोगी है: 1pt = 1/72 इंच, 72pt = 1 इंच ≈ स्क्रीन पर 96px।
बेस फॉन्ट साइज़ चुनना और डिजाइन सिस्टम के साथ काम करना
अधिकांश ब्राउज़र रूट फॉन्ट साइज़ के लिए डिफ़ॉल्ट रूप से 16px का उपयोग करते हैं, इसीलिए कन्वर्टर की डिफ़ॉल्ट सेटिंग में 1rem = 16px है। कुछ डेवलपर्स `html { font-size: 62.5%; }` सेट करते हैं ताकि 1rem = 10px हो, जिससे मेंटल मैथ सरल होता है (24px = 2.4rem बनाम 1.5rem)। यह तकनीक विवादास्पद है क्योंकि इसमें हर जगह फॉन्ट साइज़ रीसेट करना होता है और एक्सेसिबिलिटी प्रेफरेंस के साथ कॉन्फ्लिक्ट हो सकता है।
मॉडर्न डिजाइन सिस्टम (Material Design, Apple HIG, Tailwind CSS) स्पेसिंग और टाइपोग्राफी के लिए मॉड्युलर स्केल का उपयोग करते हैं — आमतौर पर 4px या 8px के मल्टीपल। इन यूनिट्स में काम करना और rem में कन्वर्ट करना अलग-अलग कॉन्टेक्स्ट में कंसिस्टेंट विजुअल रिदम सुनिश्चित करता है। Tailwind का डिफ़ॉल्ट स्केल उदाहरण के लिए 4px = 1 यूनिट का उपयोग करता है, इसलिए 4 (16px) की वैल्यू 1rem के बराबर होती है। संदेह होने पर, अपना बेस 16px पर रखें और मेंटल अरिथमेटिक के बिना सटीक rem वैल्यू के लिए इस कन्वर्टर का उपयोग करें।
अक्सर पूछे जाने वाले प्रश्न
›px को rem में कैसे कन्वर्ट करें?
पिक्सेल वैल्यू को रूट फॉन्ट साइज़ से विभाजित करें। डिफ़ॉल्ट 16px बेस के साथ: rem = px ÷ 16। तो 24px = 1.5rem, 32px = 2rem, 48px = 3rem। यदि आपका रूट फॉन्ट साइज़ 10px है (`html { font-size: 62.5%; }` से), तो rem = px ÷ 10।
›ब्राउज़र का डिफ़ॉल्ट फॉन्ट साइज़ क्या है?
सभी प्रमुख ब्राउज़र डिफ़ॉल्ट रूप से रूट फॉन्ट साइज़ के लिए 16px का उपयोग करते हैं जब तक यूज़र ने अपनी प्रेफरेंस नहीं बदली हो। इसका मतलब है डिफ़ॉल्ट कॉन्फिगरेशन में 1rem = 16px। कुछ यूज़र एक्सेसिबिलिटी के लिए इसे बढ़ाते हैं — टेक्स्ट के लिए px की जगह rem उपयोग करने का मुख्य कारण।
›rem और em में क्या अंतर है?
rem हमेशा रूट एलिमेंट (<html>) फॉन्ट साइज़ के सापेक्ष होता है, जिससे यह प्रेडिक्टेबल बनता है। em वर्तमान एलिमेंट के फॉन्ट साइज़ के सापेक्ष होता है जो इनहेरिटेंस के माध्यम से बदल सकता है। ग्लोबल वैल्यू (बॉडी फॉन्ट साइज़, पेज लेआउट) के लिए rem का उपयोग करें और उन वैल्यू के लिए em जो लोकल कॉन्टेक्स्ट के साथ स्केल होनी चाहिए (एलिमेंट के अपने फॉन्ट साइज़ के सापेक्ष padding)।
›1rem में कितने पिक्सेल होते हैं?
डिफ़ॉल्ट रूप से, 1rem = 16px। `html { font-size: 20px }` सेट करने पर 1rem = 20px। `html { font-size: 62.5% }` सेट करने पर (डिफ़ॉल्ट 16px के सापेक्ष) 1rem = 10px। इस कन्वर्टर का बेस फील्ड अनुमानित रूट साइज़ बदलने की अनुमति देता है।
›फॉन्ट साइज़ के लिए rem या px कौन सा उपयोग करना चाहिए?
जब भी संभव हो फॉन्ट साइज़ के लिए rem का उपयोग करें। rem-बेस्ड टेक्स्ट यूज़र के ब्राउज़र फॉन्ट साइज़ प्रेफरेंस का सम्मान करता है, जो एक्सेसिबिलिटी के लिए जरूरी है। पिक्सेल ब्राउज़र सेटिंग को इग्नोर करता है, मतलब बड़े टेक्स्ट की जरूरत वाले यूज़र को ज़ूमिंग से फायदा नहीं होता (ब्राउज़र ज़ूम से पहले)।
›px को pt में कैसे कन्वर्ट करें?
1 पॉइंट = 1/72 इंच = स्क्रीन पर 1.333 पिक्सेल। कन्वर्ट करने के लिए: pt = px × 0.75। तो 16px = 12pt। पॉइंट्स मुख्य रूप से प्रिंट CSS में और PDF या प्रिंट स्टाइलशीट जैसे फिज़िकल मीडिया को टार्गेट करते समय उपयोग किए जाते हैं।
›CSS यूनिट में % का क्या मतलब है?
CSS में परसेंटेज कॉन्टेक्स्ट पर निर्भर करती है। font-size के लिए, 100% = इनहेरिटेड फॉन्ट साइज़ (1em जैसा ही)। width/height के लिए, 100% = कंटेनिंग ब्लॉक का साइज़। इस कन्वर्टर में, हम % को बेस फॉन्ट साइज़ के परसेंटेज के रूप में मानते हैं, इसलिए 100% = बेस px और 150% = 1.5 × बेस।
›62.5% ट्रिक क्या है?
`html { font-size: 62.5%; }` सेट करने से 1rem = 10px हो जाता है (क्योंकि डिफ़ॉल्ट 16px का 62.5% = 10px)। इससे rem कैलकुलेशन सरल होती है: 24px 1.5rem की जगह 2.4rem बन जाता है। हालांकि, इसमें पूरे CSS में फॉन्ट साइज़ रीसेट करना होता है और थर्ड-पार्टी कंपोनेंट टूट सकते हैं। मॉडर्न डिजाइन टोकन और टूलिंग इस ट्रिक को कम जरूरी बनाते हैं।
संबंधित टूल्स
अंतिम अपडेट: