मूळ घटकाचा फॉन्ट आकार, पालक घटकाचा फॉन्ट आकार आणि DPI वापरून px चे rem, em, pt, पायका, इंच आणि mm मध्ये रूपांतर करा. CSS मध्ये 1 in = 96 px = 72 pt निश्चित आहे.
लेखक: AdminAI लेखन साधनांच्या साहाय्याने मसुदा तयारअद्यतनित तपासलेली उदाहरणे: ७
मूळ फॉन्ट 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 = parent font size |
| rem (रूट फॉन्टचे माप) | 1.5rem | 1 rem = root font size |
| पॅरेंट फॉन्टच्या मापाची टक्केवारी (%) | 150% | 100% = parent font size |
1 px
1 rem = root font size
CSS सर्व लांबी पिक्सेलमार्गे बदलते. निरपेक्ष एकके स्थिर: 1 in = 2.54 cm = 96 px = 72 pt = 6 pc; 1 Q पाव मिलिमीटर. फॉन्ट-सापेक्ष एकके पानावर अवलंबून: 1 rem मूळ फॉन्ट, font-sizeवरील 1 em (किंवा 100%) पालकाचा फॉन्ट. आधी px करून लक्ष्य एककाच्या pxने भागतो.
फ्रंटएंड विकसक डिझाइनमधील pxचे rem करतात, जेणेकरून मजकूर ब्राउझरच्या फॉन्ट पसंतीनुसार बदलेल: डीफॉल्ट मूळ 16 pxवर 24 px म्हणजे 1.5 rem. मुद्रणासाठी प्रति इंच पिक्सेल क्षेत्र; 300 DPIवर 10 mm लोगोला सुमारे 118 पिक्सेल. वाचकाची पसंती लागू होण्यासाठी मूळ फॉन्ट आकारानेही त्या पसंतीचे पालन केले पाहिजे.
CSS इंच पडद्यावर मोजलेल्या इंचाइतकाच असेल असे नाही. CSSमध्ये प्रति इंच 96 px आणि संदर्भ पिक्सेलचा दृश्यकोन सुमारे 0.0213° आहे. अंमलबजावणी absolute एकके भौतिक मापाशी किंवा पिक्सेलशी जोडू शकते; उपकरणाचे मॅपिंग, पाहण्याचे अंतर व छपाईचे स्केल यांवर पट्टीशी जुळणे अवलंबून असते.
सूत्रात xₛ, xₜ मूळ व लक्ष्य मूल्ये; pₛ, pₜ प्रति मूळ व लक्ष्य एकक पिक्सेल. गुणक दिलेल्या फॉन्ट आकार व पिक्सेल घनतेवर आधारित.
मूल्य आणि एककांबरोबर रूट व पॅरेंट फॉन्ट आकार द्या. रूट 16 px असेल तर 24 px = 1.5 rem; रूट 20 px असेल तर 24 px = 1.2 rem. समान px मूल्याचा rem मधील आकडा संदर्भानुसार बदलतो.
| मूल्य | मूळ एकक | लक्ष्य एकक | गणनेची अट | रूपांतरित मूल्य |
|---|---|---|---|---|
| 24 | px | rem | रूट 16 px | 1.5 |
| 24 | px | rem | रूट 20 px | 1.2 |
| 12 | pt | px | 96 पिक्सेल/in | 16 |
| 1 | pc | pt | 96 पिक्सेल/in | 12 |
| 100 | % | em | पॅरेंट फॉन्ट 16 px | 1 |
| 10 | mm | px | 300 पिक्सेल/in | 118.110236 |
CSS मधील संबंध 1 in = 96 px = 72 pt असा आहे. वेगळी घनता दिल्यावरचे मोजमाप त्या घनतेवरील भौतिक पिक्सेल मोजते: 10 mm × 300 ÷ 25.4 ≈ 118.110236 px. यातून ब्राउझरचा CSS संबंध बदलत नाही किंवा पडद्यावरची खरी लांबी आपोआप मोजली जात नाही.
येथील em आणि % हे font-size साठी पॅरेंट फॉन्टवर, तर rem रूटवर आधारित आहेत. सर्व CSS गुणधर्मांच्या टक्केवारीचा आधार समान नसतो; em चाही अर्थ वापराच्या ठिकाणावर अवलंबून असतो. झूम किंवा उपकरणाच्या पिक्सेल गुणोत्तरावरूनच प्रत्यक्ष लांबी ठरवू नका.
पडताळणीचा स्रोत: उदाहरण पडताळणी: 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 फॉन्ट आकार; वापरकर्त्याने किंवा html { font-size }ने न बदलल्यास प्रमुख ब्राउझर 16 px ठेवतात. त्या डीफॉल्टवर html { font-size: 62.5% } केल्यास 1 rem = 10 px. W3C CSS Values and Units remची व्याख्या करते; 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.
वाचकाच्या browser font-size पसंतीनुसार मजकूर बदलावा तर rem वापरा आणि मूळ फॉन्ट आकारालाही ती पसंती पाळू द्या. Page zoomमुळे px व rem दोन्ही वाढतात; rem, em व टक्केवारी मूळ किंवा पालकाच्या संदर्भातून पसंतीनुसार बदलू शकतात. WCAG 2.1 निकष 1.4.4 (AA)नुसार सामग्री व कार्य न गमावता मजकूर 200%पर्यंत वाढवता आला पाहिजे. px हे browser zoomने साधू शकतो; मूळ संदर्भ योग्य असेल तर remही फॉन्ट पसंती पाळतो.
CSS inch पडद्यावरच्या मोजलेल्या inchइतकाच असेल असे नाही. CSSमध्ये 1 in = 96 px. W3C संदर्भ पिक्सेल म्हणजे 96 DPI पडदा 28 in अंतरावरून पाहिलेला पिक्सेल, सुमारे 0.0213° दृश्यकोन. उपकरणाचे मॅपिंग व पाहण्याचे अंतर बदलतात; फोनवरील 96 px चौकट प्रत्यक्ष inchपेक्षा लहान असू शकते. मूळ आकाराच्या छपाईत 1 in म्हणजे 25.4 mm, पण छपाईचे स्केल व कॅलिब्रेशनही प्रत्यक्ष आकारावर परिणाम करतात.
या कॅल्क्युलेटरमध्ये स्वतंत्र स्रोतांमधील उत्तरांसह ७ सोडवलेली उदाहरणे आहेत. ती चाचणी संचात चालतात आणि तुम्ही ती येथेही चालवू शकता.