CSS यूनिट कन्वर्टर
किसी भी CSS लंबाई को px, rem, em, %, pt, pc, in, cm, mm और Q के बीच एक साथ बदलें। सटीक rem, em और प्रतिशत परिणामों के लिए अपना रूट और एलिमेंट font-size सेट करें। सब कुछ आपके ब्राउज़र में चलता है; कुछ भी अपलोड नहीं होता।
| यूनिट | मान | कॉपी |
|---|---|---|
px पिक्सेल | 16px | |
rem रूट em | 1rem | |
em em | 1em | |
% प्रतिशत | 100% | |
pt पॉइंट | 12pt | |
pc पाइका | 1pc | |
in इंच | 0.166667in | |
cm सेंटीमीटर | 0.423333cm | |
mm मिलीमीटर | 4.233333mm | |
Q क्वार्टर-mm | 16.933333Q |
कन्वर्टर कैसे काम करता है
कोई मान टाइप करें और वह यूनिट चुनें जिससे आप बदल रहे हैं (from)। टूल उसे एक साथ हर दूसरी CSS
लंबाई यूनिट में बदलता है और हर परिणाम टेबल में कॉपी के लिए तैयार दिखाता है। चूँकि rem,
em और % किसी निश्चित भौतिक लंबाई के बजाय किसी font-size के सापेक्ष होते हैं,
इन्हें दो सेटिंग्स नियंत्रित करती हैं: रूट font-size (rem के लिए) और
एलिमेंट font-size (em और % के लिए)। दोनों ब्राउज़र मानक
16px पर डिफ़ॉल्ट रहते हैं, इसलिए बिना किसी बदलाव के
16px = 1rem = 1em = 100% = 12pt = 1pc। किसी भी बॉक्स को अपने CSS से मिलाने के लिए बदलें और
हर प्रभावित परिणाम तुरंत अपडेट हो जाता है।
px से rem, em, pt और % — आम मान
डिफ़ॉल्ट 16px रूट/एलिमेंट font-size पर गणना की गई:
| px | rem | em | pt | % |
|---|---|---|---|---|
8px | 0.5rem | 0.5em | 6pt | 50% |
10px | 0.625rem | 0.625em | 7.5pt | 62.5% |
12px | 0.75rem | 0.75em | 9pt | 75% |
14px | 0.875rem | 0.875em | 10.5pt | 87.5% |
16px | 1rem | 1em | 12pt | 100% |
18px | 1.125rem | 1.125em | 13.5pt | 112.5% |
20px | 1.25rem | 1.25em | 15pt | 125% |
24px | 1.5rem | 1.5em | 18pt | 150% |
28px | 1.75rem | 1.75em | 21pt | 175% |
32px | 2rem | 2em | 24pt | 200% |
40px | 2.5rem | 2.5em | 30pt | 250% |
48px | 3rem | 3em | 36pt | 300% |
64px | 4rem | 4em | 48pt | 400% |
CSS लंबाई यूनिट्स की व्याख्या
| यूनिट | प्रकार | परिभाषा |
|---|---|---|
px | निरपेक्ष (संदर्भ पिक्सेल) | मूल CSS यूनिट। मानक 96-DPI डिस्प्ले पर 1px = इंच का 1/96, और यह font-size के साथ स्केल नहीं करता। |
rem | फ़ॉन्ट-सापेक्ष | "रूट em" — रूट (<html>) font-size के सापेक्ष। 1rem = रूट font-size, डिफ़ॉल्ट रूप से 16px। स्केलेबल, सुलभ (accessible) साइज़िंग के लिए पसंदीदा यूनिट। |
em | फ़ॉन्ट-सापेक्ष | मौजूदा एलिमेंट के अपने font-size के सापेक्ष। 1em = उस एलिमेंट का font-size, इसलिए नेस्टेड em मान संयुक्त (compound) होते हैं। |
% | सापेक्ष | font-size के लिए, पैरेंट एलिमेंट के font-size का एक प्रतिशत। 100% पैरेंट font-size (डिफ़ॉल्ट रूप से 16px) के बराबर होता है। |
pt | निरपेक्ष (प्रिंट) | पॉइंट, प्रिंट टाइपोग्राफी से। 1pt = 1/72 इंच = 4/3 px, इसलिए 12pt = 16px। इसे प्रिंट स्टाइलशीट के लिए ही रखना सबसे अच्छा है। |
pc | निरपेक्ष (प्रिंट) | पाइका। 1pc = 12pt = 16px। |
in | निरपेक्ष (भौतिक) | इंच। 1in = 96px = 2.54cm। भौतिक यूनिट मुख्यतः प्रिंट के लिए हैं। |
cm | निरपेक्ष (भौतिक) | सेंटीमीटर। 1cm = 96/2.54 ≈ 37.8px। |
mm | निरपेक्ष (भौतिक) | मिलीमीटर। 1mm = 1/10 cm ≈ 3.78px। |
Q | निरपेक्ष (भौतिक) | क्वार्टर-मिलीमीटर। 1Q = 1/40 cm ≈ 0.945px। फ़ाइन प्रिंट मेट्रिक्स के बाहर बहुत कम इस्तेमाल होता है। |
तेज़ तरीक़ा: px ↔ rem
डिफ़ॉल्ट 16px रूट font-size के साथ, rem = px ÷ 16 और
px = rem × 16। इसलिए 24px, 1.5rem है, 32px, 2rem है, और 0.5rem, 8px है। एक लोकप्रिय
शॉर्टकट है html { font-size: 62.5% } सेट करना, जो रूट को 10px बना देता है — तब
rem = px ÷ 10 और संख्याएँ आसानी से पढ़ने योग्य हो जाती हैं (18px = 1.8rem)। उस स्केल में
काम करने के लिए ऊपर “रूट font-size” बॉक्स में 10 डालें।
मुझे कौन-सी यूनिट इस्तेमाल करनी चाहिए?
- rem — font-size, स्पेसिंग और लेआउट के लिए डिफ़ॉल्ट विकल्प। यह उपयोगकर्ता की ब्राउज़र font-size सेटिंग के साथ स्केल करता है, जो सुलभता (accessibility) के लिए महत्वपूर्ण है, और साथ ही पूरे-पेज पर अनुमानित रहता है।
- em — जब आप चाहते हैं कि कोई मान अपने स्थानीय एलिमेंट के साथ स्केल करे, जैसे पैडिंग जो किसी कॉम्पोनेंट के अपने font-size के साथ बढ़े। नेस्ट होने पर संयोजन (compounding) का ध्यान रखें।
- px — बारीक बॉर्डर, निश्चित आइकन साइज़ और जहाँ भी आपको एक सटीक, न-स्केल-होने वाली लंबाई चाहिए।
- % — तरल (fluid) चौड़ाई और किसी पैरेंट का अनुसरण करने वाली font-size के लिए।
- pt / pc / in / cm / mm / Q —
@media printस्टाइलशीट के लिए रखें, जहाँ एक असली भौतिक आउटपुट आकार होता है।
गोपनीयता
यह कन्वर्टर पूरी तरह आपके अपने डिवाइस पर गणना करता है — आप जो मान डालते हैं वे कभी आपके डिवाइस से बाहर नहीं जाते, कुछ भी लॉग नहीं होता और कोई नेटवर्क अनुरोध नहीं होता। एक बार लोड होने पर यह ऑफ़लाइन भी काम करता रहता है।
अक्सर पूछे जाने वाले सवाल
- px को rem में कैसे बदलें?
- पिक्सेल मान को रूट font-size से भाग दें। ब्राउज़र के डिफ़ॉल्ट रूट font-size 16px के साथ, rem = px ÷ 16 — इसलिए 24px = 1.5rem, 32px = 2rem और 12px = 0.75rem। यदि आपका CSS <html> एलिमेंट पर कोई अलग रूट font-size सेट करता है (एक आम तरकीब 62.5% है, जो रूट को 10px बना देती है ताकि 1rem = 10px हो और गणित "px ÷ 10" बन जाए), तो वह मान "रूट font-size" बॉक्स में डालें और टूल हर rem आपके लिए फिर से गणना कर देगा।
- em और rem में क्या अंतर है?
- दोनों फ़ॉन्ट-सापेक्ष हैं, पर ये अलग-अलग चीज़ों के सापेक्ष नापते हैं। rem हमेशा रूट (<html>) font-size के सापेक्ष होता है, इसलिए 1rem पूरे पेज पर हर जगह एक ही लंबाई का होता है। em मौजूदा एलिमेंट के अपने font-size के सापेक्ष होता है, इसलिए 1em इस बात पर बदलता है कि उसे कहाँ इस्तेमाल किया गया है, और नेस्टेड em मान संयुक्त होते हैं (1.2em वाला एलिमेंट, 1.2em वाले पैरेंट के अंदर, ग्रैंडपैरेंट साइज़ के 1.44 × पर रेंडर होता है)। जब आप अनुमानित, पूरे-पेज साइज़िंग चाहते हैं तो rem इस्तेमाल करें, और जब आप चाहते हैं कि कोई मान अपने स्थानीय संदर्भ के साथ स्केल करे तो em। यह टूल आपको रूट font-size (rem के लिए) और एलिमेंट font-size (em और % के लिए) अलग-अलग सेट करने देता है।
- em और % एक अलग font-size क्यों माँगते हैं?
- क्योंकि ये रूट के नहीं, एलिमेंट के सापेक्ष होते हैं। 1em और 100% दोनों उस एलिमेंट के font-size के बराबर होते हैं जिस पर मान लागू किया गया है (या इनहेरिट की गई प्रॉपर्टी के लिए उसके पैरेंट के), जो ज़रूरी नहीं कि रूट font-size हो। यदि आप "एलिमेंट font-size" को 16px पर छोड़ देते हैं तो आपको डिफ़ॉल्ट व्यवहार मिलता है; इसे उस एलिमेंट से मिलाएँ जिसे आप स्टाइल कर रहे हैं — मान लें 20px — और तब 1.5em सही ढंग से 30px और 50% को 10px दिखाता है।
- 12pt कितने पिक्सेल होते हैं?
- ठीक 16px। एक पॉइंट (pt) को इंच के 1/72 के रूप में परिभाषित किया गया है और CSS 1 इंच को 96px मानता है, इसलिए 1pt = 96/72 = 4/3 px ≈ 1.333px, और 12pt = 16px। यही वजह है कि 12pt, 16px, 1rem, 1pc और 100% सभी एक ही डिफ़ॉल्ट टेक्स्ट साइज़ बताते हैं। पॉइंट प्रिंट टाइपोग्राफी से आते हैं और इन्हें प्रिंट स्टाइलशीट तक ही रखना सबसे अच्छा है; स्क्रीन के लिए px या rem इस्तेमाल करें।
- क्या भौतिक यूनिट (in, cm, mm) स्क्रीन पर सटीक होते हैं?
- CSS इन्हें संदर्भ पिक्सेल के निश्चित अनुपात मानता है — 1in = 96px, 1cm ≈ 37.8px, 1mm ≈ 3.78px — भले ही वास्तविक डिस्प्ले का भौतिक आकार या रिज़ॉल्यूशन कुछ भी हो। इसलिए CSS में "1cm" केवल एक सामान्य 96-DPI स्क्रीन पर ही सचमुच एक सेंटीमीटर होता है; किसी फ़ोन या 4K मॉनिटर पर यह रूलर से नापने पर असली सेंटीमीटर नहीं होगा। इसीलिए भौतिक यूनिट केवल प्रिंट स्टाइलशीट के लिए ही सुझाए जाते हैं, जहाँ आउटपुट माध्यम का असली भौतिक आकार होता है।
- क्या कुछ भी अपलोड या सेव होता है?
- नहीं। पूरा कन्वर्टर आपके ब्राउज़र में सादे JavaScript और साधारण अंकगणित से चलता है — कोई नेटवर्क अनुरोध नहीं होता, कुछ भी अपलोड नहीं होता और कुछ भी संग्रहीत नहीं होता। पेज एक बार लोड होने के बाद आप इसे ऑफ़लाइन इस्तेमाल कर सकते हैं।