CSS यूनिट कन्वर्टर
एक बार मान दर्ज करें और इसे हर CSS लंबाई यूनिट में देखें — px, rem, em, pt, %, vw और vh — अपने चुने हुए रूट फ़ॉन्ट आकार, पैरेंट फ़ॉन्ट आकार और व्यूपोर्ट के साथ। किसी भी परिणाम को एक टैप में कॉपी करें।
सामान्य रूपांतरण
हर यूनिट में बदला गया
rem, em और % फ़ॉन्ट आकार पर निर्भर करते हैं; vw और vh व्यूपोर्ट पर निर्भर करते हैं। px और pt का अनुपात निश्चित है (1pt = 1.3333px)। यदि आपके डिफ़ॉल्ट मान भिन्न हैं तो ऊपर दिए संदर्भ को समायोजित करें।
px से rem संदर्भ (रूट = 16px)
| px | rem | pt |
|---|---|---|
| 8px | 0.5rem | 6pt |
| 10px | 0.625rem | 7.5pt |
| 12px | 0.75rem | 9pt |
| 14px | 0.875rem | 10.5pt |
| 16px | 1rem | 12pt |
| 18px | 1.125rem | 13.5pt |
| 20px | 1.25rem | 15pt |
| 24px | 1.5rem | 18pt |
| 32px | 2rem | 24pt |
| 48px | 3rem | 36pt |
डिफ़ॉल्ट 16px रूट फ़ॉन्ट आकार के साथ, rem पाने के लिए पिक्सेल को 16 से भाग दें, और पॉइंट पाने के लिए 0.75 से गुणा करें।
CSS यूनिट कन्वर्टर के बारे में
CSS आपको लंबाई व्यक्त करने के कई तरीके देता है, और सही यूनिट चुनना ही उस लेआउट और टूटने वाले लेआउट के बीच का अंतर है जो सुंदरता से स्केल करता है। यह कन्वर्टर एक ही मान को एक साथ सभी सामान्य CSS यूनिट्स में बदल देता है। px (पिक्सेल) निरपेक्ष संदर्भ यूनिट है — CSS में एक पिक्सेल 1/96 इंच के रूप में परिभाषित है। rem दस्तावेज़ के रूट फ़ॉन्ट आकार (<html> तत्व) के सापेक्ष है, जो डिफ़ॉल्ट रूप से 16px है, इसलिए 1rem = 16px और 1.5rem = 24px; आकार निर्धारण के लिए rem आधुनिक मानक है क्योंकि एक रूट मान बदलने से पूरा पृष्ठ पुनः स्केल हो जाता है, जो सुलभता के लिए बढ़िया है। em वर्तमान तत्व के पैरेंट फ़ॉन्ट आकार के सापेक्ष है, इसलिए नेस्ट करने पर यह गुणित होता है। pt (पॉइंट) प्रिंट यूनिट है, 1pt = 1/72 इंच = 1.3333px पर निश्चित, इसलिए 12pt = 16px। font-size संदर्भ में % पैरेंट फ़ॉन्ट आकार के बराबर होता है, जिससे 100% वही होता है जो 1em है। vw और vh व्यूपोर्ट की चौड़ाई और ऊँचाई के 1% हैं — तरल, पूर्ण-स्क्रीन लेआउट के लिए आदर्श। उन्नत पैनल में अपना रूट फ़ॉन्ट आकार, पैरेंट फ़ॉन्ट आकार और व्यूपोर्ट आकार सेट करें; उचित डिफ़ॉल्ट (16/16/1920×1080) रोज़मर्रा के px↔rem मामले को सीधे कवर करते हैं।
CSS यूनिट कैसे बदलें
- 1 एक मान टाइप करें और वह यूनिट चुनें जिसमें वह है (उदाहरण के लिए 24 px या 1.5 rem)।
- 2 परिणाम ग्रिड में हर दूसरी यूनिट में समतुल्य मान पढ़ें, और इसे पेस्ट-तैयार रूप में कॉपी करने के लिए किसी भी कार्ड पर कॉपी बटन दबाएँ (जैसे «1.5rem»)।
- 3 यदि आपका प्रोजेक्ट 16px / 1920×1080 डिफ़ॉल्ट का उपयोग नहीं करता है तो रूट फ़ॉन्ट आकार, पैरेंट फ़ॉन्ट आकार या व्यूपोर्ट आकार बदलने के लिए उन्नत पैनल खोलें।
रूपांतरण सूत्र
हर रूपांतरण निश्चित CSS अनुपातों का उपयोग करते हुए पिक्सेल के माध्यम से होता है: rem = px ÷ रूट-फ़ॉन्ट-आकार (डिफ़ॉल्ट 16) — इसलिए px = rem × 16। em = px ÷ पैरेंट-फ़ॉन्ट-आकार (डिफ़ॉल्ट 16)। pt = px × 0.75, क्योंकि 1px = 1/96 इंच और 1pt = 1/72 इंच, जिससे 1pt = 96/72 px = 1.3333px और 1px = 0.75pt मिलता है। % = px ÷ पैरेंट-फ़ॉन्ट-आकार × 100 (font-size प्रतिशत, जहाँ 100% = पैरेंट का फ़ॉन्ट आकार, जो 1em के समान है)। vw = px ÷ व्यूपोर्ट-चौड़ाई × 100, और vh = px ÷ व्यूपोर्ट-ऊँचाई × 100। डिफ़ॉल्ट मानों के साथ इसका अर्थ है 16px = 1rem = 1em = 100% = 12pt = 0.8333vw = 1.4815vh। यदि रूट फ़ॉन्ट आकार जैसा कोई आधार 0 पर सेट है तो संगत यूनिट अपरिभाषित हो जाती है और अनंत के बजाय «—» के रूप में दिखाई देती है।
अक्सर पूछे जाने वाले प्रश्न
1rem कितने px होते हैं?
डिफ़ॉल्ट रूप से 1rem = 16px, क्योंकि rem रूट (<html>) फ़ॉन्ट आकार के सापेक्ष है और ब्राउज़र इसे शुरू से 16px पर सेट करते हैं। इसलिए 1.5rem = 24px और 2rem = 32px। यदि आप रूट फ़ॉन्ट आकार बदलते हैं — उदाहरण के लिए गणित आसान बनाने के लिए 10px पर — तो 1rem उस मान के बराबर होता है (16px तब 1.6rem हो जाएगा)। उन्नत पैनल में अपना रूट फ़ॉन्ट आकार सेट करें और कन्वर्टर तुरंत पुनः गणना करता है।
px से rem का सूत्र क्या है?
rem = px ÷ रूट-फ़ॉन्ट-आकार, और उल्टा px = rem × रूट-फ़ॉन्ट-आकार। डिफ़ॉल्ट 16px रूट के साथ इसका अर्थ है कि rem पाने के लिए पिक्सेल मान को 16 से भाग दें: 24px ÷ 16 = 1.5rem, 10px ÷ 16 = 0.625rem। फ़ॉन्ट आकार और स्पेसिंग के लिए px की तुलना में rem को प्राथमिकता दी जाती है क्योंकि यह उपयोगकर्ता की ब्राउज़र फ़ॉन्ट आकार सेटिंग का सम्मान करता है, जो सुलभता के लिए बेहतर है।
डिफ़ॉल्ट रूट फ़ॉन्ट आकार क्या है?
हर प्रमुख ब्राउज़र में डिफ़ॉल्ट रूट फ़ॉन्ट आकार 16px है, जो <html> तत्व पर लागू होता है। यह rem का आधार है, इसलिए जब तक आप (या कोई स्टाइलशीट) इसे ओवरराइड न करें, 1rem = 16px। यह कन्वर्टर रूट और पैरेंट फ़ॉन्ट आकार दोनों के लिए 16px को डिफ़ॉल्ट के रूप में उपयोग करता है; आप अपने प्रोजेक्ट से मिलान के लिए उन्नत पैनल में किसी को भी बदल सकते हैं।
px और pt में क्या अंतर है?
px (पिक्सेल) स्क्रीन के लिए मानक यूनिट है और CSS में 1/96 इंच के रूप में परिभाषित है। pt (पॉइंट) पारंपरिक प्रिंट/टाइपोग्राफी यूनिट है, जो 1/72 इंच के बराबर है। इससे अनुपात निश्चित हो जाता है: 1pt = 96/72 px ≈ 1.3333px, और 1px = 0.75pt। इसलिए 12pt = 16px, यही कारण है कि 12pt प्रिंट दस्तावेज़ और 16px स्क्रीन शीर्षक एक ही आकार के दिखते हैं। वेब के लिए px (या rem) का उपयोग करें और pt को प्रिंट स्टाइलशीट के लिए सुरक्षित रखें।
संबंधित टूल
UnitConv पर निर्माण जारी रखें। कलर कन्वर्टर से HEX, RGB और HSL के बीच रंग बदलें, CSS ग्रेडिएंट बनाएँ, WCAG कंट्रास्ट अनुपात जाँचें, आस्पेक्ट रेशियो निकालें, और मुख्य यूनिट कन्वर्टर में वेब से परे लंबाई यूनिट्स का अन्वेषण करें।