PX से REM कन्वर्टर

Pixel value को root font size से divide करें: rem = px ÷ root। Browser के default 16px root पर, 16px ÷ 16 = 1rem, 24px ÷ 16 = 1.5rem, और 40px ÷ 16 = 2.5rem। ऊपर converter में कोई भी px value type करें और rem field तुरंत update हो जाती है — कोई mental math नहीं चाहिए। 62.5% trick (10px root) के लिए बस 10 से divide करें: 24px = 2.4rem।

Rem value को root font size से multiply करें: px = rem × root। Default 16px root पर, 1rem × 16 = 16px, 1.5rem × 16 = 24px, और 0.875rem × 16 = 14px। Converter में rem field edit करें और px field तुरंत follow करती है। Converter पूरी तरह bidirectional है — जो value पता हो उसे enter करें और बाकी automatically update हो जाती हैं।

1rem root (html) font size के बराबर होता है। Chrome, Safari, Firefox, Edge — सभी major browsers में यह default से 16px होता है, इसलिए 1rem = 16px जब तक root बदला न हो। अगर root को 10px (62.5% trick) set किया जाए, तो 1rem = 10px हो जाता है। Users अपने browser की default text size settings में भी बदल सकते हैं, जिससे उनके लिए 1rem का मतलब बदल जाता है — इसीलिए rem accessible font sizes के लिए px से बेहतर है।

Standard 16px root पर 0.875rem = 14px होता है (0.875 × 16 = 14)। यह CSS frameworks में सबसे commonly used rem values में से एक है — Tailwind CSS की text-sm class 0.875rem (14px) है। 10px root (62.5% trick) पर, 0.875rem = 8.75px होगा।

px एक absolute, fixed unit है — 16px हमेशा 16 pixels होता है, user settings या screen size से कोई फर्क नहीं। rem relative होता है: यह root (html) element की font size का multiple है, इसलिए 1rem = 16px by default लेकिन अगर user accessibility settings में browser की base text size बढ़ाए तो scale हो जाता है। इससे rem-based layouts ज़्यादा accessible होते हैं — जब user बड़ा text माँगे तो text proportionally बढ़ता है, जबकि px-based text fixed रहता है और पढ़ने में बहुत छोटा हो सकता है।

px fixed होता है। rem root (html) font size के relative होता है — पूरे page के लिए एक consistent anchor। em अपने parent element की font size के relative होता है, इसलिए nested elements में compound होता है: 20px के parent के अंदर 1.5em का child 30px देगा। उसी child को 1.5rem करें तो 24px मिलेगा (1.5 × 16px root), parent चाहे कुछ भी हो। 16px root और बिना nesting के, 16px, 1rem और 1em सब बराबर होते हैं — फर्क तब दिखता है जब parent font sizes बदलें।

Accessibility के नज़रिए से font sizes के लिए rem बेहतर है। जब कोई अपने browser की default text size बढ़ाता है — visually impaired users के लिए एक common accessibility ज़रूरत — तो हर rem-based font size उसके साथ scale होती है, जबकि px values locked रहती हैं। WCAG 2.1 guideline 1.4.4 (Resize Text) require करती है कि text को functionality खोए बिना 200% तक resize किया जा सके — rem use करने से यह effortless हो जाता है। px केवल उन चीज़ों के लिए use करें जो scale नहीं होनी चाहिए, जैसे 1px borders या fixed-size icons।

62.5% trick root (html) font size को 62.5% set करती है — जो browser default 16px पर 10px के बराबर होता है। इससे rem arithmetic बेहद आसान हो जाती है: 1.6rem = 16px, 2.4rem = 24px, 3.2rem = 32px। हर rem value cleanly 10 के multiple में map होती है। यहाँ root font size 10px के preset पर switch करें और converter तथा reference table तुरंत recalculate हो जाते हैं। Tradeoff यह है कि अब आपका root size user के browser default को override कर रहा है, जिससे accessibility थोड़ी कम होती है।

Standard 16px root पर: 10px = 0.625rem, 12px = 0.75rem, 13px = 0.8125rem, 14px = 0.875rem, 16px = 1rem, 18px = 1.125rem, 20px = 1.25rem, 24px = 1.5rem, 28px = 1.75rem, 32px = 2rem, 40px = 2.5rem, 48px = 3rem। Tool की reference table में सभी common values listed हैं और एक single click से कोई भी copy कर सकते हैं — हर बार manually calculate करने से तेज़।

Tailwind CSS default से ज़्यादातर size values के लिए rem units use करता है, 16px root के साथ। Tailwind का spacing scale: 1 unit = 0.25rem = 4px। इसलिए space-4 = 1rem = 16px, space-6 = 1.5rem = 24px, space-8 = 2rem = 32px। Typography के लिए: text-sm = 0.875rem (14px), text-base = 1rem (16px), text-lg = 1.125rem (18px), text-xl = 1.25rem (20px), text-2xl = 1.5rem (24px)। यह converter किसी भी custom px value को Tailwind के rem-based system के साथ quickly check करने देता है।

हाँ, पूरी तरह। Converter आपके browser में JavaScript में चलता है — कोई server communication नहीं, कोई API calls नहीं, और कोई data upload नहीं। Page एक बार load होने के बाद offline भी काम करता है। आप जो values type करते हैं वो कभी आपके device से नहीं जातीं। इसे bookmark करें और बिना internet के — flight में, tunnel में, या कहीं भी coding करते वक्त — use करें। कुछ भी किसी server पर store नहीं होता।

Root Font Size field में कोई भी value type करें — या 16px (browser default) या 10px (62.5% trick) के preset buttons use करें। Table और active input में हर rem, em, और pt conversion तुरंत आपके नए root के हिसाब से recalculate हो जाती है। अगर आपकी CSS में html { font-size: 18px; } set है, तो root में 18 enter करें और सभी conversions आपके specific project के scale के लिए accurate होंगी।