rem को पिक्सेल (px) में बदलें
एक rem ब्राउज़र के डिफ़ॉल्ट फ़ॉन्ट साइज़ पर 16 पिक्सेल के बराबर है, इसलिए 1.5 rem 24 पिक्सेल है। हिसाब सिर्फ़ एक गुणा का है: rem मान को पेज के बेस फ़ॉन्ट साइज़ से गुणा करें। पहले फ़ील्ड में मान लिखें, और अगर आपका पेज दूसरा बेस इस्तेमाल करता है, तो उसे “बेस font-size” फ़ील्ड में लिखें।
rem क्या है और CSS में पिक्सेल क्या है?
rem CSS की एक सापेक्ष लंबाई इकाई है। इसका मान पेज के रूट एलिमेंट, यानी html एलिमेंट के फ़ॉन्ट साइज़ के बराबर होता है[1]। अगर html का फ़ॉन्ट साइज़ 16 पिक्सेल है, तो पेज का हर rem 16 पिक्सेल का होगा। यह साइज़ बदलते ही rem में लिखे सभी साइज़ एक साथ बदल जाते हैं।
CSS में पिक्सेल (px) एक स्थिर इकाई है: मानक इसे 1/96 इंच तय करता है[1], यानी CSS का एक इंच 96 पिक्सेल का होता है। इंच से पिक्सेल कन्वर्टर और मिलीमीटर से पिक्सेल कन्वर्टर में DPI फ़ील्ड भी 96 से शुरू होता है। आम अर्थ में पिक्सेल कंप्यूटर स्क्रीन पर बनने वाले चित्र की सबसे छोटी इकाई है[2]। ब्राउज़र में फ़ॉन्ट साइज़ बदला जाए, तब भी CSS का पिक्सेल वही रहता है, और Figma जैसे डिज़ाइन प्रोग्राम भी साइज़ पिक्सेल में दिखाते हैं। इसलिए rem को पिक्सेल में बदलकर स्टाइलशीट की तुलना डिज़ाइन से की जा सकती है।
:root सेलेक्टर खुद html एलिमेंट को चुनता है, इसलिए यहाँ लिखा फ़ॉन्ट साइज़ हर rem मान का बेस बन जाता है। तस्वीर में दिख रहे हिस्से में यह सेलेक्टर रंगों के वेरिएबल रखता है और फ़ॉन्ट साइज़ तय नहीं करता, इसलिए बेस ब्राउज़र का ही रहता है। फ़ोटो: Pankaj Patel, Unsplash।1 rem कितने पिक्सेल के बराबर है?
1 rem 16 पिक्सेल के बराबर है, जब तक बेस फ़ॉन्ट साइज़ Chrome, Edge और Firefox का डिफ़ॉल्ट है। सूत्र है: पिक्सेल = rem × बेस फ़ॉन्ट साइज़। इसलिए 1.5 rem 24 पिक्सेल है, और 0.875 rem 14 पिक्सेल, जो Tailwind CSS में text-sm टेक्स्ट का साइज़ है[3]।
16 की संख्या दो जगह से बदल सकती है। पहली जगह स्टाइलशीट है: नियम html { font-size: 62.5% } बेस को 10 पिक्सेल कर देता है, और तब 1.5 rem 15 पिक्सेल होता है। दूसरी जगह पाठक की सेटिंग है: Chrome की “फ़ॉन्ट साइज़” सूची में “बड़ा” चुनने पर 1 rem 20 पिक्सेल हो जाता है।
इसीलिए कन्वर्टर में पेज के बेस के लिए तीसरा फ़ील्ड है। उसमें वह बेस लिखें, जो आपका पेज इस्तेमाल करता है, और आपको वही पिक्सेल मान मिलेगा, जो उस पेज के पाठक देखते हैं। अगर बेस पता नहीं है, तो फ़ील्ड में पहले से लिखे 16 से शुरू करें।
rem को px में कैसे बदलें? सूत्र और उदाहरण
सूत्र है px = rem × font-size, जहाँ font-size का मतलब html एलिमेंट का फ़ॉन्ट साइज़ है। उदाहरण के लिए, 16 पिक्सेल के डिफ़ॉल्ट बेस पर 1.25 rem की स्पेसिंग 1.25 × 16 = 20 पिक्सेल है। 20 पिक्सेल के बेस पर यही स्पेसिंग 25 पिक्सेल होगी।
62.5% वाली तकनीक html का फ़ॉन्ट साइज़ डिफ़ॉल्ट का 62.5% कर देती है। 16 का 62.5% 10 होता है, इसलिए बेस 10 पिक्सेल हो जाता है और मान सीधे पढ़े जा सकते हैं: 2.4 rem 24 पिक्सेल के बराबर है। अगर ब्राउज़र में फ़ॉन्ट साइज़ 20 पिक्सेल कर दिया जाए, तो बेस 12.5 पिक्सेल होगा और 2.4 rem 30 पिक्सेल बन जाएगा। कन्वर्टर का “बेस font-size” फ़ील्ड प्रतिशत उसी तरह स्वीकार करता है, जैसे वह स्टाइलशीट में लिखा जाता है, और उसे 16 पिक्सेल से गिनता है: 62.5% लिखने पर बेस 10 पिक्सेल हो जाता है।
उलटी दिशा में यही सूत्र भाग से चलता है, और यही काम px से rem कन्वर्टर करता है: वह पिक्सेल को बेस से भाग देकर rem मान देता है।
14px, फिर 0.875rem। दूसरी लाइन बाद में आती है, इसलिए ब्राउज़र 0.875rem लागू करता है। 16 पिक्सेल के बेस पर नतीजा फिर भी 14 पिक्सेल रहता है, क्योंकि 0.875 × 16 = 14, जबकि 20 पिक्सेल के बेस पर टेक्स्ट 17.5 पिक्सेल का होगा। फ़ोटो: Nick Karvounis, Unsplash।तीन अलग बेस पर rem कितने पिक्सेल होते हैं?
| rem मान | 16 px पर (डिफ़ॉल्ट) | 10 px पर (62.5%) | 20 px पर (बड़ा) |
|---|---|---|---|
| 0.125 rem | 2 px | 1.25 px | 2.5 px |
| 0.25 rem | 4 px | 2.5 px | 5 px |
| 0.375 rem | 6 px | 3.75 px | 7.5 px |
| 0.5 rem | 8 px | 5 px | 10 px |
| 0.625 rem | 10 px | 6.25 px | 12.5 px |
| 0.75 rem | 12 px | 7.5 px | 15 px |
| 0.8 rem | 12.8 px | 8 px | 16 px |
| 0.875 rem | 14 px | 8.75 px | 17.5 px |
| 0.9 rem | 14.4 px | 9 px | 18 px |
| 1 rem | 16 px | 10 px | 20 px |
| 1.1 rem | 17.6 px | 11 px | 22 px |
| 1.125 rem | 18 px | 11.25 px | 22.5 px |
| 1.2 rem | 19.2 px | 12 px | 24 px |
| 1.25 rem | 20 px | 12.5 px | 25 px |
| 1.3 rem | 20.8 px | 13 px | 26 px |
| 1.375 rem | 22 px | 13.75 px | 27.5 px |
| 1.4 rem | 22.4 px | 14 px | 28 px |
| 1.5 rem | 24 px | 15 px | 30 px |
| 1.6 rem | 25.6 px | 16 px | 32 px |
| 1.625 rem | 26 px | 16.25 px | 32.5 px |
| 1.75 rem | 28 px | 17.5 px | 35 px |
| 1.8 rem | 28.8 px | 18 px | 36 px |
| 1.875 rem | 30 px | 18.75 px | 37.5 px |
| 2 rem | 32 px | 20 px | 40 px |
| 2.25 rem | 36 px | 22.5 px | 45 px |
| 2.5 rem | 40 px | 25 px | 50 px |
| 2.75 rem | 44 px | 27.5 px | 55 px |
| 3 rem | 48 px | 30 px | 60 px |
| 3.5 rem | 56 px | 35 px | 70 px |
| 3.75 rem | 60 px | 37.5 px | 75 px |
| 4 rem | 64 px | 40 px | 80 px |
| 4.5 rem | 72 px | 45 px | 90 px |
| 5 rem | 80 px | 50 px | 100 px |
| 6 rem | 96 px | 60 px | 120 px |
| 8 rem | 128 px | 80 px | 160 px |
| 10 rem | 160 px | 100 px | 200 px |
| 16 rem | 256 px | 160 px | 320 px |
| 20 rem | 320 px | 200 px | 400 px |
| 32 rem | 512 px | 320 px | 640 px |
Tailwind CSS के फ़ॉन्ट साइज़ कितने पिक्सेल के हैं?
| Tailwind क्लास | rem मान | 16 पर पिक्सेल | 20 पर पिक्सेल |
|---|---|---|---|
| text-xs | 0.75 rem | 12 px | 15 px |
| text-sm | 0.875 rem | 14 px | 17.5 px |
| text-base | 1 rem | 16 px | 20 px |
| text-lg | 1.125 rem | 18 px | 22.5 px |
| text-xl | 1.25 rem | 20 px | 25 px |
| text-2xl | 1.5 rem | 24 px | 30 px |
| text-3xl | 1.875 rem | 30 px | 37.5 px |
| text-4xl | 2.25 rem | 36 px | 45 px |
| text-5xl | 3 rem | 48 px | 60 px |
| text-6xl | 3.75 rem | 60 px | 75 px |
| text-7xl | 4.5 rem | 72 px | 90 px |
| text-8xl | 6 rem | 96 px | 120 px |
| text-9xl | 8 rem | 128 px | 160 px |
Chrome और Edge में फ़ॉन्ट साइज़ के विकल्प कौन-सा बेस सेट करते हैं?
| Chrome में विकल्प | Edge में विकल्प | बेस, यानी 1 rem | 0.875 rem | 1.5 rem | 2 rem |
|---|---|---|---|---|---|
| बहुत छोटा | बहुत छोटा फ़ॉन्ट आकार | 9 px | 7.88 px | 13.5 px | 18 px |
| छोटा | छोटे फ़ॉन्ट का आकार | 12 px | 10.5 px | 18 px | 24 px |
| सामान्य (सुझाया गया) | मध्यम (अनुशंसित) फ़ॉन्ट आकार | 16 px | 14 px | 24 px | 32 px |
| बड़ा | बड़े फ़ॉन्ट का आकार | 20 px | 17.5 px | 30 px | 40 px |
| बहुत बड़ा | बहुत बड़ा फ़ॉन्ट आकार | 24 px | 21 px | 36 px | 48 px |
कन्वर्टर के फ़ील्ड किन रूपों में लिखे मान स्वीकार करते हैं?
| आप क्या लिखते या चिपकाते हैं | कन्वर्टर का नतीजा | इस रूप के साथ क्या होता है |
|---|---|---|
| पहला फ़ील्ड: 16 पिक्सेल के बेस पर rem मान | ||
| 1.5 | 24 px | दशमलव बिंदु वैसा ही है, जैसा हिंदी में संख्याओं और CSS में मानों के लिए इस्तेमाल होता है। हम 1.5 को 16 से गुणा करते हैं। |
| १.५ | 24 px | देवनागरी अंकों को हम लैटिन अंकों की तरह पढ़ते हैं, इसलिए मान 1.5 है। |
| 1,5 | 24 px | अल्पविराम के बाद एक या दो अंक हों, तो हम उसे दशमलव बिंदु पढ़ते हैं। |
| 1,125rem | 18 px | rem से सटा अल्पविराम हम दशमलव बिंदु पढ़ते हैं, चाहे उसके बाद तीन अंक हों, क्योंकि CSS दशमलव बिंदु से लिखता है और हज़ार का विभाजक नहीं रखता। फ़ील्ड के नीचे एक संकेत दूसरी संभावित पढ़त भी दिखाता है: 1125। |
| 1,875 | 30000 px | इकाई न हो और अल्पविराम के बाद ठीक तीन अंक हों, तो हम उसे हज़ार का विभाजक पढ़ते हैं, जैसे हिंदी में लिखा जाता है, इसलिए मान 1,875 rem है। फ़ील्ड के नीचे एक संकेत दूसरी संभावित पढ़त भी दिखाता है: 1.875। |
| .875rem | 14 px | मिनिफ़ाई की गई CSS फ़ाइल में अक्सर बिंदु से पहले शून्य नहीं होता। हम इसे 0.875 पढ़ते हैं और rem छोड़ देते हैं। |
| font-size: 1.5rem; | 24 px | यह स्टाइलशीट की पूरी लाइन है। हम संख्या लेते हैं और प्रॉपर्टी का नाम और सेमीकोलन छोड़ देते हैं। |
| --text-sm: 0.875rem; | 14 px | यह Tailwind CSS के थीम वेरिएबल की लाइन है। वेरिएबल के नाम से पहले के दो डैश माइनस नहीं गिने जाते। |
| margin-top: -0.5rem; | -8 px | यह स्टाइलशीट का नेगेटिव मार्जिन है। संख्या से सटा माइनस गिना जाता है, इसलिए नतीजा भी नेगेटिव है। |
| 3/4 | 12 px | साधारण भिन्न भी चलता है: 3 को 4 से भाग देने पर 0.75 rem मिलता है। |
| “बेस font-size” फ़ील्ड: कन्वर्टर जो बेस गिनता है | ||
| 62.5% | 10 px | html एलिमेंट के लिए लिखा जाने वाला प्रतिशत 16 पिक्सेल के डिफ़ॉल्ट बेस से गिना जाता है: 16 का 62.5% 10 है। |
| ६२.५% | 10 px | वही प्रतिशत देवनागरी अंकों में भी चलता है। |
| 125% | 20 px | 100% से बड़ा प्रतिशत भी चलता है: 16 का 125% 20 है, जो Chrome के “बड़ा” विकल्प वाला बेस है। |
| font-size: 20px | 20 px | यह DevTools से कॉपी की गई लाइन है। हम संख्या लेते हैं और प्रॉपर्टी का नाम और इकाई छोड़ देते हैं। |
| 18.5 | 18.5 px | दशमलव वाला बेस भी चलता है, जब तक वह 1 से 100 के बीच है। |
Chrome, Edge, Firefox और Safari में बेस फ़ॉन्ट साइज़ कैसे बदलें?
Chrome, Edge और Firefox में चुना गया साइज़ खुले हुए पेज के हर rem मान का बेस बन जाता है। यहाँ सेटिंग के नाम हर ब्राउज़र के हिंदी इंटरफ़ेस जैसे हैं, और जहाँ इंटरफ़ेस अंग्रेज़ी में है, वहाँ हमने अंग्रेज़ी नाम लिखे हैं।
Chrome
“सेटिंग” खोलें, “दिखने का तरीका” पर जाएँ और “फ़ॉन्ट साइज़” सूची से साइज़ चुनें। “फ़ॉन्ट को पसंद के मुताबिक बनाएं” बटन एक पेज खोलता है, जिसमें “फ़ॉन्ट साइज़” और “फ़ॉन्ट का छोटे से छोटा साइज़” स्लाइडर हैं।Edge
“सेटिंग” खोलें, “प्रकटन” में “फ़ॉन्ट्स” पर जाएँ और “फ़ॉन्ट का आकार” सूची से साइज़ चुनें। यहाँ हर विकल्प के नाम में फ़ॉन्ट और आकार शब्द भी हैं, जैसे बीच का विकल्प “मध्यम (अनुशंसित) फ़ॉन्ट आकार”। उसी पेज पर नीचे “न्यूनतम फ़ॉन्ट आकार” है।Firefox
“सेटिंग” खोलें, फिर Accessibility और उसमें Fonts सेक्शन पर जाएँ और Font size सूची से संख्या चुनें। हिंदी Firefox 156 में यह सेक्शन अंग्रेज़ी में दिखता है। Firefox यह साइज़ हर लिपि के लिए अलग रखता है और पेज की लिपिlangएट्रिब्यूट से पहचानता है। हमारे माप में देवनागरी के लिए 23 पिक्सेल सेट करने परlang="hi"वाले पेज पर 1 rem 23 पिक्सेल हुआ, जबकि बिनाlangवाला पेज 16 पिक्सेल पर रहा। Advanced settings बटन “फ़ॉन्ट” विंडो खोलता है, जिसमें “फोंट के लिए” सूची और “न्यूनतम फ़ॉन्ट आकार” हैं।Mac पर Safari
Safari मेनू में Settings चुनें और Advanced पर क्लिक करें। ये नाम Apple की अंग्रेज़ी गाइड से हैं। यहाँ Safari सिर्फ़ निचली सीमा तय करता है: “Never use font sizes smaller than” विकल्प चालू करें और संख्या चुनें। अगर पक्का न हो, तो Apple 12 या 14 आज़माने की सलाह देता है[4]।
टेक्स्ट का साइज़ rem में क्यों लिखा जाता है?
rem में लिखा टेक्स्ट तब बड़ा हो जाता है, जब ब्राउज़र में फ़ॉन्ट साइज़ बढ़ाया जाता है, जबकि पिक्सेल में लिखा टेक्स्ट वैसा ही रहता है। यह बात W3C के Web Content Accessibility Guidelines (WCAG) के सफलता मानदंड 1.4.4 Resize Text से जुड़ी है: “Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.”[5] इसका मतलब है कि कैप्शन और टेक्स्ट की तस्वीरों को छोड़कर टेक्स्ट को बिना सहायक तकनीक के 200 प्रतिशत तक बड़ा किया जा सके, और कोई सामग्री या काम न छूटे। WCAG का हिंदी में आधिकारिक अनुवाद नहीं है, इसलिए हम यह मानदंड अंग्रेज़ी में उद्धृत कर रहे हैं। पिक्सेल में बदलने से नतीजे की तुलना डिज़ाइन से करना आसान होता है, और डिज़ाइन के साइज़ स्टाइलशीट में rem में लिखने के लिए px से rem कन्वर्टर है।
दूसरी इकाइयों को पिक्सेल में बदलें
स्रोत
- CSS Values and Units Module Level 4 — W3C
- पिक्सल — विकिपीडिया
- font-size — Tailwind CSS
- Change Advanced settings in Safari on Mac — Apple
- Web Content Accessibility Guidelines (WCAG) 2.2 — W3C
- <length> CSS type — MDN Web Docs
तालिकाओं का हर मान हमने इकाइयों की परिभाषा से निकाला है और प्रकाशन से पहले गणना करके दोबारा जाँचा है। ऐतिहासिक मान और स्थानीय इकाइयों के नाम ऊपर दिए गए स्रोतों से लिए गए हैं।
सामग्री की पिछली जाँच: · लेखन और जाँच: Arteon टीम
rem को px में बदलने के बारे में आम सवाल
क्या 1 rem हमेशा 16 पिक्सेल के बराबर होता है?
1 rem तब तक 16 पिक्सेल है, जब तक बेस फ़ॉन्ट साइज़ डिफ़ॉल्ट रहता है[6]। अगर पेज html एलिमेंट को दूसरा साइज़ देता है या ब्राउज़र में फ़ॉन्ट साइज़ बदला जाता है, तो 1 rem भी बदल जाता है। उदाहरण के लिए, Chrome में “बड़ा” विकल्प 1 rem को 20 पिक्सेल कर देता है।
1.5 rem कितने पिक्सेल होते हैं?
16 पिक्सेल के डिफ़ॉल्ट बेस पर 1.5 rem 24 पिक्सेल है। 10 पिक्सेल के बेस पर यह 15 पिक्सेल होगा और 20 पिक्सेल के बेस पर 30 पिक्सेल।
2 rem और 0.5 rem कितने पिक्सेल हैं?
16 पिक्सेल के बेस पर 2 rem 32 पिक्सेल है और 0.5 rem 8 पिक्सेल। दोनों मान बेस के साथ बदलते हैं: 20 पिक्सेल के बेस पर 2 rem 40 पिक्सेल होगा और 0.5 rem 10 पिक्सेल।
rem और em में क्या अंतर है?
rem हमेशा html एलिमेंट के फ़ॉन्ट साइज़ से गिना जाता है, इसलिए पूरे पेज पर उसका मान एक जैसा रहता है। em पैरेंट एलिमेंट के फ़ॉन्ट साइज़ से गिना जाता है, इसलिए 20 पिक्सेल फ़ॉन्ट साइज़ वाले एलिमेंट के अंदर 1.5em 30 पिक्सेल होगा।
क्या पेज ज़ूम से 1 rem का मान बदलता है?
Chrome में हमारे माप में पेज को 125% ज़ूम करने के बाद भी 1 rem 16 पिक्सेल रहा। “पेज ज़ूम” पेज की हर चीज़ को एक साथ बड़ा करता है, चाहे वह rem में लिखी हो या पिक्सेल में, जबकि फ़ॉन्ट साइज़ बदलने से सिर्फ़ rem वाले मान बदलते हैं।
क्या फ़ॉन्ट का न्यूनतम साइज़ rem का हिसाब बदलता है?
Chrome और Firefox में हमारे माप में नहीं बदलता। हमने html { font-size: 62.5% } वाले पेज पर न्यूनतम साइज़ 12 पिक्सेल रखा, और 2.4 rem फिर भी 24 पिक्सेल रहा, यानी rem 10 पिक्सेल के बेस से ही गिना गया।
किसी वेबसाइट का बेस कैसे पता करें?
Chrome में DevTools खोलें, “एलिमेंट” पैनल में html एलिमेंट चुनें, फिर “कंप्यूट किए गए” टैब खोलें और font-size देखें। वहाँ दिख रही संख्या उस पेज पर इस समय rem का बेस है, जिसमें वेबसाइट और पाठक, दोनों की सेटिंग शामिल हैं।
क्या Tailwind CSS rem इस्तेमाल करता है?
हाँ। Tailwind CSS में फ़ॉन्ट साइज़ rem में लिखे जाते हैं: text-base क्लास 1 rem है, यानी डिफ़ॉल्ट बेस पर 16 पिक्सेल, और text-2xl क्लास 1.5 rem, यानी 24 पिक्सेल।
नतीजे में 17.5 पिक्सेल जैसी दशमलव संख्या क्यों आती है?
16 के अलावा किसी बेस से गुणा करने पर दशमलव आ सकता है: 20 पिक्सेल के बेस पर 0.875 rem 17.5 पिक्सेल है। कन्वर्टर दशमलव के बाद ज़्यादा से ज़्यादा दो अंक दिखाता है, और ब्राउज़र वेब पेज पर पिक्सेल के ऐसे हिस्से स्वीकार करता है।
इस कन्वर्टर को बेहतर बनाने में हमारी मदद करें
क्या किसी मान का नतीजा आपके ब्राउज़र से अलग निकला, या इस कन्वर्टर के लिए कोई सुझाव है? हमें लिखें।