px से rem — 120 आकारों की CSS इकाई तालिका
16 px यानी 1 rem और 12 pt भी। 1 से 120 px तक हर आकार, उसके rem, pt, pc, इंच और मिलीमीटर मान के साथ।
सबसे आम आकार
मुख्य पाठ 16, छोटा पाठ 14, स्पेसिंग 8, 24 और 32 — यही मान बार-बार लौटते हैं।
rem 16 से क्यों बँटता है
क्योंकि ब्राउज़र की डिफ़ॉल्ट रूट फ़ॉन्ट साइज़ 16 px है और rem उसी का गुणज है। पाठक ब्राउज़र में अक्षर बड़े करे तो केवल rem में लिखे हिस्से बढ़ते हैं — px में जड़े हिस्से वैसे ही रहते हैं।
स्क्रीन पर pt और इंच भी पिक्सेल ही हैं
CSS एक इंच को 96 px और एक पॉइंट को 1/72 इंच मानता है। इसलिए 16 px ठीक 12 pt है — पर स्क्रीन पर पैमाना रखिए तो वह "इंच" इंच नहीं निकलेगा।
पूरे अंक वाले आकार
rem 16 के गुणजों पर पूरा आता है और pt 4 के गुणजों पर — क्योंकि 4 px ठीक 3 pt है।
1 px से 120 px तक
कैसे पढ़ें
- rem = px ÷ 16, क्योंकि ब्राउज़र रूट फ़ॉन्ट साइज़ 16 px रखते हैं।
- pt = px × 0.75, क्योंकि CSS एक इंच को 96 px और एक पॉइंट को 1/72 इंच मानता है।
- एक pc बराबर 12 pt, और एक इंच बराबर 96 px तथा 72 pt।
- पाठ और स्पेसिंग के लिए rem; बॉर्डर जैसी पतली रेखाओं के लिए px रहने दें।
अक्सर पूछे जाने वाले सवाल
Q. 1 rem कितने px है?
डिफ़ॉल्ट रूप से 16 px। यदि पाठक ने ब्राउज़र में अक्षर बड़े कर रखे हैं तो यह भी बढ़ जाता है — rem इस्तेमाल करने का कारण यही है।
Q. px लिखें या rem?
पाठ और स्पेसिंग के लिए rem बेहतर है, ताकि पाठक के अक्षर बढ़ाने पर सब साथ बढ़े। 1 px बॉर्डर जैसी पतली रेखाओं के लिए px रखिए।
Q. html पर font-size: 62.5% क्यों देते हैं?
इससे रूट 10 px हो जाता है और 1.6 rem का अर्थ 16 px बनता है। दिक़्क़त यह है कि जिसने जान-बूझकर फ़ॉन्ट बड़ा किया है, उसके लिए पृष्ठ छोटा हो जाता है।
Q. pt अब भी क्यों चलता है?
यह छपाई से आया है और प्रिंट स्टाइलशीट तथा ईमेल टेम्पलेट में बना हुआ है। स्क्रीन पर रूपांतरण साफ़ है: 16 px यानी 12 pt।
Q. em और rem में क्या अंतर है?
rem हमेशा रूट फ़ॉन्ट साइज़ से नापता है, जबकि em उसी तत्व के फ़ॉन्ट साइज़ से — इसलिए नेस्टेड em गुणा होते जाते हैं।