मूल तत्व के फ़ॉन्ट आकार, जनक तत्व के फ़ॉन्ट आकार और DPI से px को rem, em, pt, पाइका, इंच और mm में बदलें। CSS में 1 in = 96 px = 72 pt तय है।
लेखक: AdminAI लेखन टूल से मसौदा तैयारअपडेट किया गया जाँचे गए उदाहरण: 7
16 px मूल फ़ॉन्ट और प्रति इंच 96 पिक्सेल पर 24px = 1.5rem है।
| इकाई | मान | परिभाषा |
|---|---|---|
| पिक्सेल (px) | 24px | 1 px |
| पॉइंट (pt) | 18pt | 1 pt = 1/72 in |
| पाइका (pc) | 1.5pc | 1 pc = 12 pt = 1/6 in |
| इंच (in) | 0.25in | 1 in = DPI px |
| सेंटीमीटर (cm) | 0.635cm | 1 cm = 1/2.54 in |
| मिलीमीटर (mm) | 6.35mm | 1 mm = 1/25.4 in |
| चौथाई मिलीमीटर (Q) | 25.4Q | 1 Q = 0.25 mm |
| em (पैरेंट फ़ॉन्ट आकार) | 1.5em | 1 em = पैरेंट फ़ॉन्ट आकार |
| rem (मूल फ़ॉन्ट आकार) | 1.5rem | 1 rem = मूल फ़ॉन्ट आकार |
| पैरेंट फ़ॉन्ट आकार का प्रतिशत (%) | 150% | 100% = पैरेंट फ़ॉन्ट आकार |
1 px
1 rem = मूल फ़ॉन्ट आकार
CSS हर लंबाई को पिक्सेल के माध्यम से बदलता है। निरपेक्ष इकाइयों का आपसी संबंध निश्चित है: 1 in = 2.54 cm = 96 px = 72 pt = 6 pc, और 1 Q एक चौथाई मिलीमीटर है। फ़ॉन्ट पर निर्भर इकाइयाँ पेज के अनुसार बदलती हैं: 1 rem मूल एलिमेंट का फ़ॉन्ट आकार है; font-size सेट करते समय 1 em (या 100%) पैरेंट का फ़ॉन्ट आकार है। परिवर्तक पहले मान को पिक्सेल में बदलता है, फिर लक्ष्य इकाई के पिक्सेल से भाग देता है।
फ़्रंट-एंड डेवलपर डिज़ाइन के पिक्सेल आकारों को rem में बदलने के लिए इसका उपयोग करते हैं, ताकि टेक्स्ट पाठक के ब्राउज़र की फ़ॉन्ट सेटिंग का पालन करे। पहले से चुने 16 px मूल आकार पर 24 px = 1.5 rem है। प्रिंट डिज़ाइनर प्रति इंच पिक्सेल वाला फ़ील्ड उपयोग करते हैं: 300 DPI पर 10 mm के लोगो को लगभग 118 पिक्सेल चाहिए। यह तभी पाठक की पसंद का पालन करता है जब मूल फ़ॉन्ट आकार भी उस पसंद को मानता हो।
CSS इंच का स्क्रीन पर नापा गया इंच होना ज़रूरी नहीं है। CSS प्रति इंच 96 px निर्धारित करता है; संदर्भ पिक्सेल का दृष्टि-कोण लगभग 0.0213° है। कार्यान्वयन निरपेक्ष लंबाई इकाइयों को भौतिक माप या पिक्सेल से जोड़ सकता है। उपकरण का मानचित्रण, देखने की दूरी और प्रिंट स्केल तय करते हैं कि पैमाना मेल खाता है या नहीं।
सूत्र में xₛ और xₜ मूल और लक्ष्य मान हैं; pₛ और pₜ उनकी प्रत्येक इकाई में पिक्सेल की संख्या हैं। ये गुणक आपके दर्ज किए फ़ॉन्ट आकारों और पिक्सेल घनत्व पर आधारित हैं।
मात्रा, स्रोत और लक्ष्य unit के साथ root, parent और pixels-per-inch का संदर्भ दें। rem = px/root size। Root 16 px हो तो 24 px = 1.5 rem, root 20 px हो तो वही 24 px = 1.2 rem। उलटी दिशा में root size से गुणा करें।
16 px एक प्रचलित browser setting है, हर पाठक या stylesheet का निश्चित root नहीं। जिस पन्ने की गणना कर रहे हैं उसका लागू root पढ़ें।
| मात्रा | स्रोत | लक्ष्य | संदर्भ | बदला मान |
|---|---|---|---|---|
| 24 | px | rem | रूट 16 px | 1.5 |
| 24 | px | rem | रूट 20 px | 1.2 |
| 12 | pt | px | 96 pixels/in | 16 |
| 1 | pc | pt | 96 pixels/in | 12 |
| 100 | % | em | पैरेंट 16 px | 1 |
| 10 | mm | px | 300 pixels/in | 118.110236 |
font-size में em parent के font size से जुड़ा है; padding जैसी दूसरी property में em उसी element के font size से जुड़ता है। rem root पर रहता है। दो स्तरों पर 1.2em लगाने से 1.44 का संयुक्त गुणक बन सकता है, जबकि 1.2rem का root-संदर्भ स्थिर रहता है।
इस फॉर्म में % parent font size का प्रतिशत है। 20 px parent का 150% = 30 px। Width के प्रतिशत का आधार अलग containing block हो सकता है; इस font-percentage उत्तर को हर CSS property पर लागू न करें।
W3C CSS Values and Units में 1 in = 96 px = 72 pt = 6 pc = 2.54 cm का संबंध है। इसलिए 16 CSS px = 12 pt, एक pc = 12 pt। Q एक चौथाई millimeter है।
स्क्रीन का CSS pixel, स्क्रीन के हर physical pixel के समान होना जरूरी नहीं। 96 CSS px के box की वास्तविक ruler-लंबाई हर उपकरण पर एक inch मानना गलत हो सकता है।
300 pixels/inch चुनने पर यहाँ physical image/print की गणना होती है। 10 mm = 10/25.4×300 ≈ 118.110236 pixels। Browser की CSS गणना में absolute unit के लिए 96 वाला संबंध ही रहता है; स्क्रीन का DPI बदलने से CSS नियम नहीं बदलते।
Negative margin जैसी signed मात्रा ऋण चिह्न के साथ बदल सकती है। Root, parent और DPI धनात्मक रखें। उत्तर से units हटाकर अकेली संख्या किसी दूसरे संदर्भ में रखने से परिणाम बदल सकता है। सामान्य भौतिक माप के लिए लंबाई परिवर्तक देखें।
जाँच का स्रोत: CSS Values 3 §6.1: 1rem = मूल फ़ॉन्ट आकार (ब्राउज़र का डिफ़ॉल्ट 16 px); 24 / 16 = 1.5
जाँच का स्रोत: CSS Values 3 §6.2: 1pt = 1/72 in, 1in = 96px; 12 × 96/72 = 16
जाँच का स्रोत: CSS Values 3 §6.2: 1in = 96px
जाँच का स्रोत: 1 rem = मूल फ़ॉन्ट आकार (16 px); 1.5 × 16
डिफ़ॉल्ट रूप से 16 पिक्सेल। एक rem मूल html एलिमेंट के फ़ॉन्ट आकार के बराबर होता है। प्रमुख ब्राउज़र इसे 16 px रखते हैं, जब तक पाठक डिफ़ॉल्ट फ़ॉन्ट आकार न बदले या स्टाइलशीट में html { font-size } न दिया जाए। html { font-size: 62.5% } करने पर 1 rem = 10 px हो जाता है। rem की परिभाषा W3C CSS Values and Units विनिर्देश देता है; 16 px ब्राउज़र का डिफ़ॉल्ट है, विनिर्देश की शर्त नहीं।
पिक्सेल को 0.75 से गुणा करें। पॉइंट को पिक्सेल में बदलने के लिए 4/3 (लगभग 1.333) से गुणा करें। दोनों गुणक W3C के CSS नियम 1 in = 96 px = 72 pt से आते हैं, इसलिए 1 px = 72/96 pt है। 16 px का सामान्य टेक्स्ट 12 pt है और वर्ड प्रोसेसर का 11 pt टेक्स्ट लगभग 14.67 px है।
rem हमेशा मूल एलिमेंट के फ़ॉन्ट आकार पर निर्भर है। em वर्तमान एलिमेंट के फ़ॉन्ट आकार पर, या font-size में उपयोग होने पर पैरेंट के आकार पर निर्भर है। इसलिए नेस्टिंग में em के गुणक क्रम से लागू होते हैं: 1.2em सूची के भीतर 1.2em सूची का टेक्स्ट दोनों सूचियों के पहले के साझा मूल फ़ॉन्ट आकार का 1.44 गुना होता है। वहीं 16 px मूल आकार के साथ 1.2rem हर गहराई पर 19.2 px रहता है।
यदि टेक्स्ट को पाठक के ब्राउज़र की फ़ॉन्ट-आकार सेटिंग का पालन करना चाहिए तो rem चुनें और मूल फ़ॉन्ट आकार को भी उस पसंद का पालन करने दें। पेज ज़ूम px और rem दोनों को बड़ा करता है, rem, em और प्रतिशत आकार मूल या पैरेंट संदर्भ के ज़रिये फ़ॉन्ट-आकार की पसंद का पालन कर सकते हैं। WCAG 2.1 सफलता मानदंड 1.4.4 (स्तर AA) के अनुसार टेक्स्ट सामग्री या कार्यक्षमता खोए बिना 200% तक बड़ा होना चाहिए। ब्राउज़र ज़ूम px के साथ भी यह पूरा कर सकता है; मूल संदर्भ अनुमति दे तो rem फ़ॉन्ट-आकार की पसंद भी मान सकता है।
CSS इंच का स्क्रीन पर नापा गया इंच होना ज़रूरी नहीं है। CSS में 1 in ठीक 96 px है। W3C संदर्भ पिक्सेल, 96 DPI स्क्रीन को 28 in दूर से देखने पर उसके एक पिक्सेल का लगभग 0.0213° दृष्टि-कोण है। कार्यान्वयन निरपेक्ष लंबाई इकाइयों को भौतिक माप या पिक्सेल से जोड़ सकता है। उपकरण का मानचित्रण और देखने की दूरी बदलते हैं; फ़ोन पर 96 px बॉक्स वास्तविक इंच से छोटा हो सकता है। वास्तविक आकार की छपाई में 1 in = 25.4 mm संबंध पैमाने से मिल सकता है, लेकिन प्रिंट स्केल और कैलिब्रेशन भी असर डालते हैं।
इस कैलकुलेटर में स्वतंत्र स्रोतों के उत्तरों वाले 7 हल किए गए उदाहरण शामिल हैं। ये परीक्षण समूह में चलते हैं और आप इन्हें यहाँ भी चला सकते हैं।