पिक्सेल (px) को rem में बदलें
16 पिक्सेल के डिफ़ॉल्ट बेस पर 24 px 1.5 rem के बराबर है और 14 px 0.875 rem के। हिसाब सिर्फ़ एक भाग का है: पिक्सेल में साइज़ को पेज के बेस फ़ॉन्ट साइज़ से भाग दें। डिज़ाइन का साइज़ पहले फ़ील्ड में लिखें, और अगर आपका पेज दूसरा बेस इस्तेमाल करता है, तो उसे “बेस font-size” फ़ील्ड में लिखें।
rem क्या है और पिक्सेल के साइज़ rem में क्यों लिखे जाते हैं?
डिज़ाइन फ़ाइल साइज़ पिक्सेल में देती है, जैसे 28 पिक्सेल की हेडिंग या दो सेक्शन के बीच 32 पिक्सेल की दूरी। CSS में पिक्सेल एक स्थिर इकाई है, जिसे मानक 1/96 इंच तय करता है[1]। पिक्सेल से इंच कन्वर्टर और पिक्सेल से मिलीमीटर कन्वर्टर भी 96 DPI से शुरू होते हैं, यानी वे एक इंच में 96 पिक्सेल गिनते हैं। rem एक सापेक्ष इकाई है: एक rem पेज के रूट एलिमेंट html के फ़ॉन्ट साइज़ के बराबर है[1]।
em का मान नेस्टेड एलिमेंट में हर स्तर पर गुणा होता जाता है, जबकि rem हमेशा रूट एलिमेंट से गिना जाता है और पूरे पेज पर एक जैसा रहता है। पिक्सेल से rem में बदलने के लिए सिर्फ़ html एलिमेंट का फ़ॉन्ट साइज़ जानना काफ़ी है। बदलने के बाद साइज़ पाठक की सेटिंग के साथ बदलते हैं: 24 पिक्सेल की हेडिंग डिफ़ॉल्ट सेटिंग पर 24 पिक्सेल रहती है, और Chrome में “बड़ा” या Edge में “बड़े फ़ॉन्ट का आकार” चुनने वाले पाठक के लिए 30 पिक्सेल हो जाती है।
.hero नियम में 60px और .heading व .sub-heading क्लास वाले नियम में 220px। 16 पिक्सेल के बेस पर पहला मान 3.75rem होगा और दूसरा 13.75rem, और तब दोनों पाठक की सेटिंग के साथ बड़े होंगे। फ़ोटो: Ferenc Almasi, Unsplash।24 px कितने rem होते हैं?
16 पिक्सेल के डिफ़ॉल्ट बेस पर 24 पिक्सेल 1.5 rem के बराबर है। सूत्र में सिर्फ़ एक भाग है: rem = पिक्सेल ÷ बेस फ़ॉन्ट साइज़। हर 16 पिक्सेल एक rem है और एक पिक्सेल 0.0625 rem, इसलिए 8 पिक्सेल 0.5 rem है और 32 पिक्सेल 2 rem।
अगर स्टाइलशीट दूसरा बेस इस्तेमाल करती है, तो उसी बेस से भाग दें। 62.5% वाली तकनीक बेस को 10 पिक्सेल कर देती है, और तब 24 पिक्सेल 2.4 rem है। 20 पिक्सेल के बेस पर 24 पिक्सेल 1.2 rem है। बेस तीसरे फ़ील्ड में लिखें, और कन्वर्टर स्टाइलशीट में लिखने लायक मान देगा।
कुछ साइज़ 16 से पूरे नहीं बँटते, इसलिए नतीजा दशमलव के बाद ज़्यादा से ज़्यादा चार अंक दिखाता है: 13 पिक्सेल 0.8125 rem है, और CSS यह संख्या जैसी है वैसी स्वीकार करता है। “परिणाम कॉपी करें” बटन सिर्फ़ संख्या कॉपी करता है, इसलिए उसे स्टाइलशीट में चिपकाकर तुरंत rem जोड़ा जा सकता है।
पिक्सेल को rem में किस सूत्र से बदलें?
सूत्र है rem = px ÷ font-size, जहाँ font-size का मतलब html एलिमेंट का फ़ॉन्ट साइज़ है। उदाहरण के लिए, डिज़ाइन में 28 पिक्सेल की हेडिंग 16 पिक्सेल के बेस पर 28 ÷ 16 = 1.75 देती है, इसलिए स्टाइलशीट में font-size: 1.75rem लिखा जाएगा।
16 पिक्सेल के बेस पर 4 से पूरे बँटने वाले साइज़ दशमलव के बाद ज़्यादा से ज़्यादा दो अंक देते हैं, जैसे 12 पिक्सेल 0.75 rem है। बाकी सम साइज़ तीन अंक देते हैं, जैसे 14 पिक्सेल 0.875 rem, और विषम साइज़ चार अंक, जैसे 15 पिक्सेल 0.9375 rem। 13.5 पिक्सेल जैसे साइज़ में पाँचवाँ अंक आता है, इसलिए नतीजा चार अंकों तक पूर्णांकित होकर 0.8438 rem दिखता है।
उलटी दिशा के लिए rem से px कन्वर्टर है। अगर डिज़ाइन में साइज़ मिलीमीटर में हैं, जैसे प्रिंट के लिए बनी फ़ाइल में, तो उन्हें पहले मिलीमीटर से पिक्सेल कन्वर्टर से पिक्सेल में बदलें।
font-size:13px 0.8125rem होगा, और margin:16px 0 20px 1rem 0 1.25rem होगा। फ़ोटो: Rahul Mishra, Unsplash।तीन अलग बेस पर पिक्सेल कितने rem होते हैं?
| पिक्सेल में साइज़ | 16 px बेस पर rem | 10 px बेस पर rem | 20 px बेस पर rem |
|---|---|---|---|
| 1 px | 0.0625 rem | 0.1 rem | 0.05 rem |
| 2 px | 0.125 rem | 0.2 rem | 0.1 rem |
| 4 px | 0.25 rem | 0.4 rem | 0.2 rem |
| 6 px | 0.375 rem | 0.6 rem | 0.3 rem |
| 8 px | 0.5 rem | 0.8 rem | 0.4 rem |
| 10 px | 0.625 rem | 1 rem | 0.5 rem |
| 11 px | 0.6875 rem | 1.1 rem | 0.55 rem |
| 12 px | 0.75 rem | 1.2 rem | 0.6 rem |
| 13 px | 0.8125 rem | 1.3 rem | 0.65 rem |
| 14 px | 0.875 rem | 1.4 rem | 0.7 rem |
| 15 px | 0.9375 rem | 1.5 rem | 0.75 rem |
| 16 px | 1 rem | 1.6 rem | 0.8 rem |
| 17 px | 1.0625 rem | 1.7 rem | 0.85 rem |
| 18 px | 1.125 rem | 1.8 rem | 0.9 rem |
| 20 px | 1.25 rem | 2 rem | 1 rem |
| 22 px | 1.375 rem | 2.2 rem | 1.1 rem |
| 24 px | 1.5 rem | 2.4 rem | 1.2 rem |
| 25 px | 1.5625 rem | 2.5 rem | 1.25 rem |
| 26 px | 1.625 rem | 2.6 rem | 1.3 rem |
| 28 px | 1.75 rem | 2.8 rem | 1.4 rem |
| 30 px | 1.875 rem | 3 rem | 1.5 rem |
| 32 px | 2 rem | 3.2 rem | 1.6 rem |
| 36 px | 2.25 rem | 3.6 rem | 1.8 rem |
| 40 px | 2.5 rem | 4 rem | 2 rem |
| 44 px | 2.75 rem | 4.4 rem | 2.2 rem |
| 48 px | 3 rem | 4.8 rem | 2.4 rem |
| 50 px | 3.125 rem | 5 rem | 2.5 rem |
| 56 px | 3.5 rem | 5.6 rem | 2.8 rem |
| 60 px | 3.75 rem | 6 rem | 3 rem |
| 64 px | 4 rem | 6.4 rem | 3.2 rem |
| 72 px | 4.5 rem | 7.2 rem | 3.6 rem |
| 80 px | 5 rem | 8 rem | 4 rem |
| 96 px | 6 rem | 9.6 rem | 4.8 rem |
| 100 px | 6.25 rem | 10 rem | 5 rem |
| 120 px | 7.5 rem | 12 rem | 6 rem |
| 128 px | 8 rem | 12.8 rem | 6.4 rem |
| 160 px | 10 rem | 16 rem | 8 rem |
| 192 px | 12 rem | 19.2 rem | 9.6 rem |
| 200 px | 12.5 rem | 20 rem | 10 rem |
| 256 px | 16 rem | 25.6 rem | 12.8 rem |
| 320 px | 20 rem | 32 rem | 16 rem |
| 400 px | 25 rem | 40 rem | 20 rem |
स्टाइलशीट की लाइनें rem में कैसे लिखी जाती हैं?
| पिक्सेल वाली लाइन | 16 px बेस पर rem | 10 px बेस पर rem (62.5%) |
|---|---|---|
| font-size: 16px | 1rem | 1.6rem |
| font-size: 14px | 0.875rem | 1.4rem |
| font-size: 28px | 1.75rem | 2.8rem |
| padding: 12px 24px | 0.75rem 1.5rem | 1.2rem 2.4rem |
| margin-bottom: 32px | 2rem | 3.2rem |
| border-radius: 8px | 0.5rem | 0.8rem |
| max-width: 1200px | 75rem | 120rem |
| @media (min-width: 768px) | 48rem | 48rem |
html एलिमेंट के लिए लिखा नियम उस पर असर नहीं डालता[2]। हमने Chrome और Firefox में 62.5% तकनीक वाले पेज पर इसे मापा: नियम @media (min-width: 48rem) 768 पिक्सेल की चौड़ाई से लागू हुआ, और ब्राउज़र का फ़ॉन्ट साइज़ 20 पिक्सेल करने पर वही नियम 960 पिक्सेल से लागू हुआ।px से rem कन्वर्टर के फ़ील्ड किन रूपों में लिखे मान स्वीकार करते हैं?
| आप क्या लिखते या चिपकाते हैं | कन्वर्टर का नतीजा | इस रूप के साथ क्या होता है |
|---|---|---|
| पहला फ़ील्ड: 16 पिक्सेल के बेस पर पिक्सेल में साइज़ | ||
| 24 | 1.5 rem | सिर्फ़ संख्या चलती है, जैसे डिज़ाइन प्रोग्राम के माप वाले पैनल में साइज़ दिखता है। |
| 24px | 1.5 rem | इकाई संख्या से सटी हो, तो हम संख्या पढ़ते हैं और px छोड़ देते हैं। |
| 24 पिक्सेल | 1.5 rem | इकाई स्पेस के बाद हिंदी में लिखी हो, तो हम संख्या लेते हैं और शब्द छोड़ देते हैं। |
| २४ | 1.5 rem | देवनागरी अंकों को हम लैटिन अंकों की तरह पढ़ते हैं, इसलिए साइज़ 24 पिक्सेल है। |
| 13.5 | 0.8438 rem | दशमलव वाला साइज़ भी चलता है। नतीजा पूर्णांकित होकर चार दशमलव अंकों में दिखता है। |
| 1,200 | 75 rem | अल्पविराम के बाद ठीक तीन अंक हों, तो वह हज़ार का विभाजक है, जैसे हिंदी में लिखा जाता है, इसलिए साइज़ एक हज़ार दो सौ पिक्सेल है। फ़ील्ड के नीचे एक संकेत दूसरी संभावित पढ़त भी दिखाता है: 1.2। |
| 1.200 | 0.075 rem | इस पेज पर बिंदु को हम दशमलव बिंदु पढ़ते हैं, चाहे उसके बाद तीन अंक हों, इसलिए साइज़ 1.2 पिक्सेल है और फ़ील्ड के नीचे एक संकेत दिखता है। एक हज़ार दो सौ के लिए 1200 या 1,200 लिखें। |
| padding: 20px; | 1.25 rem | यह स्टाइलशीट की पूरी लाइन है। हम संख्या लेते हैं और प्रॉपर्टी का नाम और सेमीकोलन छोड़ देते हैं। |
| −8px | -0.5 rem | संख्या से पहले टाइपोग्राफ़िक माइनस “−” हो, तो हम मान को नेगेटिव पढ़ते हैं, जैसे नेगेटिव मार्जिन में। |
| “बेस font-size” फ़ील्ड: कन्वर्टर जो बेस गिनता है | ||
| 62.5% | 10 px | html एलिमेंट के लिए लिखा जाने वाला प्रतिशत: 16 पिक्सेल के डिफ़ॉल्ट बेस का 62.5% 10 है। |
| font-size: 18px | 18 px | यह स्टाइलशीट से कॉपी की गई लाइन है। हम 18 को बेस मानते हैं। |
| १६ | 16 px | बेस भी देवनागरी अंकों में लिखा जा सकता है। |
Figma से साइज़ या पूरी स्टाइलशीट px से rem में कैसे बदलें?
कुछ ही साइज़ हों, तो कन्वर्टर काफ़ी है। बहुत सारे साइज़ हों, तो डिज़ाइन प्रोग्राम और बिल्ड टूल rem खुद गिन सकते हैं।
डिज़ाइन फ़ाइल से साइज़
माप वाले पैनल से पिक्सेल में साइज़ कॉपी करें और पहले फ़ील्ड में चिपकाएँ। अगर पेजhtmlएलिमेंट को फ़ॉन्ट साइज़ देता है, तो नतीजा कॉपी करने से पहले वह साइज़ “बेस font-size” फ़ील्ड में लिखें।Figma में Dev Mode
पेड प्लान में Dev Mode साइज़ सीधे rem में दिखा सकता है। Figma का इंटरफ़ेस हिंदी में नहीं है, इसलिए नाम अंग्रेज़ी में हैं। Inspect पैनल के Code सेक्शन में भाषा वाले मेनू के पास Inspect settings पर क्लिक करें और rem इकाई चुनें। बेस बदलना हो, तो वहीं Set unit scale… चुनें और Unit scale विंडो में बेस लिखें।Sass में फ़ंक्शन
Sass संख्याओं का भागsass:mathमॉड्यूल केmath.div()फ़ंक्शन से करता है[3]। फ़ंक्शन@function rem($px) { @return math.div($px, 16px) * 1rem; }के साथrem(24px)का नतीजा1.5remहै।पूरी स्टाइलशीट के लिए PostCSS
postcss-pxtorem प्लगइन बिल्ड के दौरान CSS फ़ाइलों में px को rem में बदलता है[4]। इसका डिफ़ॉल्ट बेस 16 है, और डिफ़ॉल्ट सेटिंग में यह सिर्फ़ फ़ॉन्ट वाली प्रॉपर्टी बदलता है: font, font-size, line-height और letter-spacing। media query पिक्सेल में ही रहती हैं।
पिक्सेल को दूसरी इकाइयों में बदलें
स्रोत
- CSS Values and Units Module Level 4 — W3C
- Media Queries Level 4 — W3C
- sass:math — Sass
- postcss-pxtorem — GitHub
- <length> CSS type — MDN Web Docs
- Web Content Accessibility Guidelines (WCAG) 2.2 — W3C
तालिकाओं का हर मान हमने इकाइयों की परिभाषा से निकाला है और प्रकाशन से पहले गणना करके दोबारा जाँचा है। ऐतिहासिक मान और स्थानीय इकाइयों के नाम ऊपर दिए गए स्रोतों से लिए गए हैं।
सामग्री की पिछली जाँच: · लेखन और जाँच: Arteon टीम
px को rem में बदलने के बारे में आम सवाल
16 px कितने rem होते हैं?
16 पिक्सेल के डिफ़ॉल्ट बेस पर 16 पिक्सेल 1 rem है। 62.5% तकनीक में, यानी 10 पिक्सेल के बेस पर, यह 1.6 rem है।
14 px और 12 px कितने rem हैं?
16 पिक्सेल के बेस पर 14 पिक्सेल 0.875 rem है और 12 पिक्सेल 0.75 rem।
क्या 24 पिक्सेल हमेशा 1.5 rem होता है?
यह सिर्फ़ 16 पिक्सेल के बेस पर सही है। अगर पेज html एलिमेंट को दूसरा साइज़ देता है, तो उसी साइज़ से भाग दें: 10 पिक्सेल के बेस पर 24 पिक्सेल 2.4 rem है और 20 पिक्सेल के बेस पर 1.2 rem।
16 से ही भाग क्यों दिया जाता है?
क्योंकि 16 पिक्सेल ब्राउज़रों में आम डिफ़ॉल्ट फ़ॉन्ट साइज़ है, जिसे उपयोगकर्ता अपनी सेटिंग में बदल सकते हैं[5]। हमारे माप में Chrome, Edge और Firefox सेटिंग बदलने से पहले यही साइज़ इस्तेमाल करते हैं।
क्या 62.5% तकनीक media query में rem का मान बदलती है?
नहीं। नियम @media (min-width: 48rem) इस तकनीक के साथ और इसके बिना, दोनों हालात में 768 पिक्सेल से लागू होता है, क्योंकि media query में rem फ़ॉन्ट साइज़ के शुरुआती मान से गिना जाता है[2]। इसलिए media query की सीमाएँ 16 से भाग देकर बदलें।
px को rem में बदलना em में बदलने से कैसे अलग है?
rem html एलिमेंट के फ़ॉन्ट साइज़ से गिना जाता है, इसलिए पूरे पेज पर एक ही बेस से भाग दिया जाता है। em पैरेंट एलिमेंट के फ़ॉन्ट साइज़ से गिना जाता है, इसलिए भाग पैरेंट एलिमेंट के साइज़ से दिया जाता है।
क्या 1px की बॉर्डर rem में लिखनी चाहिए?
अगर बॉर्डर हर सेटिंग में एक पिक्सेल मोटी रहनी चाहिए, तो उसे 1px ही रहने दें। 0.0625rem लिखने पर 20 के बेस वाले पाठक को 1.25 पिक्सेल मोटी रेखा दिखेगी। postcss-pxtorem प्लगइन भी डिफ़ॉल्ट सेटिंग में border प्रॉपर्टी को पिक्सेल में रहने देता है[4]।
क्या rem में लिखा टेक्स्ट पाठक की सेटिंग के साथ बड़ा होता है?
हाँ। rem में लिखा टेक्स्ट ब्राउज़र में चुने गए फ़ॉन्ट साइज़ के साथ बड़ा होता है, जबकि पिक्सेल में लिखा टेक्स्ट वैसा ही रहता है। WCAG का सफलता मानदंड 1.4.4 Resize Text इसी बारे में है: टेक्स्ट को बिना सामग्री या काम खोए 200 प्रतिशत तक बड़ा किया जा सकना चाहिए[6]।
इस कन्वर्टर को बेहतर बनाने में हमारी मदद करें
क्या किसी साइज़ का नतीजा आपके ब्राउज़र से अलग निकला, या इस कन्वर्टर के लिए कोई सुझाव है? हमें लिखें।