CSS यूनिट कन्वर्टर
px, rem, em और pt के बीच कन्वर्ट करें। सटीक परिणामों के लिए बेस फ़ॉन्ट साइज़ सेट करें।
Points (pt):12pt
आपकी साइट के <html> एलिमेंट की फ़ॉन्ट साइज़ (ब्राउज़र डिफ़ॉल्ट 16px है)
rem रूट (<html>) एलिमेंट की फ़ॉन्ट साइज़ के सापेक्ष होता है। ब्राउज़र डिफ़ॉल्ट 16px है, इसलिए 1rem = 16px जब तक बदला न जाए।
1pt = 96 DPI पर 1.333px। Point मुख्यतः print CSS और डिज़ाइन टूल में उपयोग होता है।
सामान्य CSS साइज़
| px | rem | pt | सामान्य उपयोग |
|---|---|---|---|
| 8 | 0.5 | 6 | आइकन / border-radius |
| 10 | 0.625 | 7.5 | कोड, छोटा टेक्स्ट |
| 12 | 0.75 | 9 | छोटा टेक्स्ट / संकेत |
| 14 | 0.875 | 10.5 | बॉडी टेक्स्ट (कॉम्पैक्ट) |
| 16 | 1 | 12 | डिफ़ॉल्ट बॉडी टेक्स्ट |
| 18 | 1.125 | 13.5 | बॉडी टेक्स्ट (आरामदायक) |
| 20 | 1.25 | 15 | बड़ा टेक्स्ट / सबटाइटल |
| 24 | 1.5 | 18 | H3 / बड़ी हेडिंग |
| 32 | 2 | 24 | H2 / डिस्प्ले हेडिंग |
| 48 | 3 | 36 | H1 / मुख्य हेडिंग |
अक्सर पूछे जाने वाले प्रश्न
px (pixels) एक निरपेक्ष इकाई है जो उपयोगकर्ता सेटिंग की परवाह किए बिना हमेशा एक समान साइज़ में दिखती है। rem (root em) <html> एलिमेंट की फ़ॉन्ट साइज़ के सापेक्ष होता है — डिफ़ॉल्ट 16px पर: 1rem = 16px, 2rem = 32px। em पैरेंट एलिमेंट की फ़ॉन्ट साइज़ के सापेक्ष होता है। rem का उपयोग स्केलेबल लेआउट के लिए किया जाता है क्योंकि यह उपयोगकर्ता की ब्राउज़र फ़ॉन्ट सेटिंग का सम्मान करता है।
पिक्सल मान को अपनी रूट फ़ॉन्ट साइज़ से विभाजित करें। डिफ़ॉल्ट 16px पर: rem = px ÷ 16। उदाहरण: 24px ÷ 16 = 1.5rem, 32px ÷ 16 = 2rem, 14px ÷ 16 = 0.875rem। कई डेवलपर्स html { font-size: 62.5%; } सेट करते हैं ताकि 1rem = 10px हो जाए, जिससे गणना सरल हो जाती है।
डिफ़ॉल्ट 16px बेस फ़ॉन्ट साइज़ पर: 16px = 1rem। महत्वपूर्ण मान: 8px = 0.5rem, 12px = 0.75rem, 24px = 1.5rem, 32px = 2rem, 48px = 3rem। अगर आपकी साइट अलग बेस (जैसे 10px) उपयोग करती है, तो तदनुसार पुनर्गणना करें — इसीलिए इस कन्वर्टर में बेस फ़ॉन्ट साइज़ सेटिंग है।
rem उपयोगकर्ता की ब्राउज़र फ़ॉन्ट साइज़ प्राथमिकता का सम्मान करता है, जो accessibility के लिए महत्वपूर्ण है। दृष्टि समस्या वाले उपयोगकर्ता बेस फ़ॉन्ट साइज़ बढ़ा सकते हैं और सभी rem मान स्वतः स्केल हो जाते हैं। px मान इस सेटिंग को नजरअंदाज करते हैं। rem रिस्पॉन्सिव डिज़ाइन को भी आसान बनाता है।