CSS इकाई कनवर्टर (px ↔ em, rem, pt, %)

इस्तेमाल कैसे करें

1. जो मान बदलना है वह लिखें और उसकी इकाई चुनें: px, em, rem, pt या %।
2. अगर आपका प्रोजेक्ट ब्राउज़र का डिफ़ॉल्ट 16 px इस्तेमाल नहीं करता, तो बेस फ़ॉन्ट आकार बदल लें।
3. पूरी समतुल्यता तालिका पढ़ें — वही लंबाई हर इकाई में — और उसके नीचे रूपांतरण का सूत्र।

इस टूल के बारे में

CSS लंबाई कई इकाइयों में मापता है जो स्क्रीन पर अंततः पिक्सेल ही बनती हैं, और इन्हें हाथ से आपस में बदलना फ़्रंट-एंड काम की रोज़ की खीझ है। यह कनवर्टर एक मान लेता है — px, em, rem, pt या प्रतिशत में — और वही लंबाई पाँचों इकाइयों में एक साथ दिखाता है, आपके नियंत्रण वाले बेस फ़ॉन्ट आकार के साथ। डिफ़ॉल्ट बेस 16 px है, हर बड़े ब्राउज़र का आरंभिक फ़ॉन्ट आकार; पर अगर आपका डिज़ाइन सिस्टम html { font-size: 62.5% } या कोई और root आकार रखता है, तो बेस बदलें और पूरी तालिका ढल जाती है।

संबंध रैखिक हैं और टूल अपने लगाए सूत्र दिखाता है: पिक्सेल पाने के लिए em और rem मानों को बेस फ़ॉन्ट आकार से गुणा किया जाता है, पॉइंट CSS-परिभाषित अनुपात 96 px प्रति 72 pt पर बदलते हैं (यानी 1 pt = 1.333 px), और प्रतिशत बेस के सापेक्ष पढ़े जाते हैं, बिल्कुल em की तरह। एक ईमानदार चेतावनी टूल स्क्रीन पर भी कहता है: यहाँ em और rem एक जैसे नतीजे देते हैं क्योंकि दोनों के लिए एक ही बेस इस्तेमाल होता है। असली पेज में वे अलग होते हैं — rem हमेशा root एलिमेंट को संदर्भित करता है, जबकि em मौजूदा एलिमेंट के फ़ॉन्ट आकार को, जो ख़ुद अपने parent एलिमेंटों से स्केल हो सकता है।

आम उपयोग: पिक्सेल में मिले डिज़ाइनर हैंडऑफ़ को आपके कोडबेस के मानक rem मानों में बदलना, media query लिखने से पहले देखना कि 0.875 rem कितना बैठता है, स्टाइल गाइड के प्रिंट-उन्मुख pt आकारों को स्क्रीन इकाइयों में बदलना, या ऐसे सुलभ टाइप-स्केल तय करना जो उपयोगकर्ता की ब्राउज़र सेटिंग का सम्मान करें। रूपांतरण टाइप करते-करते 100% आपके ब्राउज़र में चलता है — कुछ अपलोड नहीं होता और कुछ इंस्टॉल नहीं करना पड़ता।

फ़ॉर्मूला

px = em × बेस; px = rem × बेस; px = pt × 96 ÷ 72; px = % ÷ 100 × बेस। उलटा: em = rem = px ÷ बेस; pt = px × 72 ÷ 96; % = px ÷ बेस × 100। डिफ़ॉल्ट 16 px बेस के साथ: 1.5 em = 24 px = 18 pt = 150%।

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