ಮೂಲ ಎಲಿಮೆಂಟ್‌ನ ಫಾಂಟ್ ಗಾತ್ರ, ಪೋಷಕ ಎಲಿಮೆಂಟ್‌ನ ಫಾಂಟ್ ಗಾತ್ರ ಮತ್ತು 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 = 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%) ಮಾತೃ ಅಂಶದ ಅಕ್ಷರಗಾತ್ರ. ಮೌಲ್ಯವನ್ನು ಪಿಕ್ಸೆಲ್ಗೆ ಬದಲಿಸಿ, ನಂತರ ಗುರಿಯ ಒಂದು ಏಕಕದ ಪಿಕ್ಸೆಲ್ ಸಂಖ್ಯೆಯಿಂದ ಭಾಗಿಸುತ್ತದೆ.
ವಾಚಕರ ಬ್ರೌಸರ್ ಅಕ್ಷರಗಾತ್ರದ ಆಯ್ಕೆಗೆ ಪಠ್ಯ ಹೊಂದಿಕೊಳ್ಳಲು ವೆಬ್ ವಿನ್ಯಾಸಕರು ಪಿಕ್ಸೆಲ್ ಗಾತ್ರಗಳನ್ನು rem ಗೆ ಬದಲಿಸುತ್ತಾರೆ: ಮೂಲ ಗಾತ್ರ 16 px ಇದ್ದರೆ 24 px ಎಂದರೆ 1.5 rem. ಮುದ್ರಣಕ್ಕೆ ಪ್ರತಿ ಇಂಚಿನ ಪಿಕ್ಸೆಲ್ ಕ್ಷೇತ್ರ ಬಳಸಿ; 300 DPI ನಲ್ಲಿ 10 mm ಲೋಗೊಗೆ ಸುಮಾರು 118 ಪಿಕ್ಸೆಲ್ ಬೇಕು. ಪಠ್ಯ ಬ್ರೌಸರ್ ಆಯ್ಕೆಯನ್ನು ಅನುಸರಿಸಲು ಮೂಲ ಅಕ್ಷರಗಾತ್ರವೂ ಆ ಆಯ್ಕೆಯನ್ನು ಗೌರವಿಸಬೇಕು.
CSS ಇಂಚು ಪರದೆಯಲ್ಲಿ ಅಳತೆಪಟ್ಟಿಯ ಇಂಚಾಗಿರಬೇಕೆಂದಿಲ್ಲ. CSS ಪ್ರತಿ ಇಂಚಿಗೆ 96 px ನಿಗದಿಪಡಿಸುತ್ತದೆ; ಉಲ್ಲೇಖ ಪಿಕ್ಸೆಲ್ ಸುಮಾರು 0.0213° ದೃಷ್ಟಿಕೋನ. ಅನುಷ್ಠಾನ ಭೌತಿಕ ಅಳತೆ ಅಥವಾ ಪಿಕ್ಸೆಲ್ಗೆ ಆಧಾರವಾಗಬಹುದು; ಸಾಧನದ ನಕ್ಷೆ, ನೋಡುವ ದೂರ ಮತ್ತು ಮುದ್ರಣದ ಮಾಪನ ನೈಜ ಅಳತೆಗೆ ಪರಿಣಾಮ ಬೀರುತ್ತವೆ.
ಸೂತ್ರದಲ್ಲಿ xₛ ಮತ್ತು xₜ ಮೂಲ ಹಾಗೂ ಗುರಿ ಮೌಲ್ಯಗಳು; pₛ ಮತ್ತು pₜ ಮೂಲ ಹಾಗೂ ಗುರಿಯ ಒಂದು ಏಕಕದಲ್ಲಿನ ಪಿಕ್ಸೆಲ್ ಸಂಖ್ಯೆಗಳು. ಈ ಗುಣಕಗಳು ನೀವು ನೀಡಿದ ಅಕ್ಷರಗಾತ್ರ ಮತ್ತು ಪಿಕ್ಸೆಲ್ ಸಾಂದ್ರತೆಯನ್ನು ಬಳಸುತ್ತವೆ.
rem ಮೂಲ ಅಂಶದ ಅಕ್ಷರಗಾತ್ರ ಅವಲಂಬಿಸುತ್ತದೆ. ಕೆಳಗಿನ ಉದಾಹರಣೆಯಲ್ಲಿ ಆ ಗಾತ್ರ ಸ್ಪಷ್ಟವಾಗಿದೆ. em ಮತ್ತು ಶೇಕಡಾಕ್ಕೆ ಈ ಫಾರ್ಮಿನ ಪೋಷಕ ಅಕ್ಷರಗಾತ್ರ ಬಳಸುತ್ತದೆ; ನಿಜವಾದ CSSನಲ್ಲಿ ಗುಣಲಕ್ಷಣದ ಪ್ರಕಾರ ಆಧಾರ ಬದಲಾಗುತ್ತದೆ.
rem = px ÷ root(px)
24 px ÷ 16 px = 1.5 rem
font-sizeಗೆ em ಪೋಷಕವನ್ನು, ಇತರ ಗುಣಲಕ್ಷಣಗಳಿಗೆ ಅಂಶದ ಸ್ವಂತ ಅಕ್ಷರಗಾತ್ರವನ್ನು ಅವಲಂಬಿಸುತ್ತದೆ. ಇತರ ಶೇಕಡಾಗಳ ಆಧಾರ ಅಗಲವೂ ಆಗಬಹುದು. ಬೇರೆ pixels/in ಇಲ್ಲಿ ಚಿತ್ರ ಅಥವಾ ಮುದ್ರಣದ ಲೆಕ್ಕಕ್ಕೆ; ಅದು CSSನ ನಿಗದಿತ ನಿರಪೇಕ್ಷ ಏಕಮಾನಗಳನ್ನು ಮರುವ್ಯಾಖ್ಯಾನಿಸುವುದಿಲ್ಲ.
| ಮೌಲ್ಯ | ಮೂಲ ಏಕಮಾನ | ಗುರಿ ಏಕಮಾನ | ಸಂದರ್ಭ | ಪರಿವರ್ತಿತ ಮೌಲ್ಯ |
|---|---|---|---|---|
| 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 px ಎಂದರೆ ಪರದೆಯ ಒಂದೇ ಭೌತಿಕ ಪಿಕ್ಸೆಲ್ ಎನ್ನುವ ಖಾತರಿ ಇಲ್ಲ. ಕೋಷ್ಟಕದ ಸಂದರ್ಭ ಪ್ರತಿಯೊಂದು ಲೆಕ್ಕದ ಭಾಗ. ಮಿಲಿಮೀಟರ್ ಸಾಲು ಸುತ್ತಿದುದು; ವೆಬ್‌ಗೆ ನಿಜವಾದ ಅಕ್ಷರಸಂದರ್ಭ ಮತ್ತು ಮುದ್ರಣಕ್ಕೆ ಬೇಕಾದ ರೆಸಲ್ಯೂಶನ್ ಬಳಸಿ.
ಆಧಾರ: W3C CSS Values and 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 ಅಂಶದ ಅಕ್ಷರಗಾತ್ರಕ್ಕೆ ಸಮ. ಓದುಗ ಆರಂಭಿಕ ಅಕ್ಷರಗಾತ್ರ ಬದಲಿಸದಿದ್ದರೆ ಅಥವಾ ಸ್ಟೈಲ್‌ಶೀಟ್‌ನಲ್ಲಿ 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.
ಪಠ್ಯವು ಓದುಗರ ಬ್ರೌಸರ್ ಅಕ್ಷರಗಾತ್ರದ ಆಯ್ಕೆಯನ್ನು ಅನುಸರಿಸಬೇಕಾದರೆ rem ಬಳಸಿ. ಪುಟದ ಝೂಮ್ px ಮತ್ತು rem ಎರಡನ್ನೂ ದೊಡ್ಡದಾಗಿಸುತ್ತದೆ; ಆರಂಭಿಕ ಅಕ್ಷರಗಾತ್ರದ ಆಯ್ಕೆ rem, em ಮತ್ತು ಶೇಕಡಾವಾರು ಗಾತ್ರಗಳನ್ನು ಮಾತ್ರ ಬದಲಿಸುತ್ತದೆ. WCAG 2.1 ಯಶಸ್ಸಿನ ಮಾನದಂಡ 1.4.4 (ಹಂತ AA) ಪಠ್ಯವನ್ನು ವಿಷಯ ಅಥವಾ ಕಾರ್ಯ ಕಳೆದುಕೊಳ್ಳದೆ 200% ವರೆಗೆ ದೊಡ್ಡದಾಗಿಸಲು ಕೇಳುತ್ತದೆ. px ಜೊತೆಯ ಬ್ರೌಸರ್ ಝೂಮ್ ಇದನ್ನು ಸಾಧಿಸಬಹುದು; rem ಅಕ್ಷರಗಾತ್ರದ ಆಯ್ಕೆಯನ್ನೂ ಗೌರವಿಸುತ್ತದೆ. rem, em ಮತ್ತು ಶೇಕಡಾವಾರು ಗಾತ್ರಗಳ ಪರಿಣಾಮ ಮೂಲ ಅಥವಾ ಮಾತೃ ಅಂಶದ ಸಂದರ್ಭವನ್ನು ಅವಲಂಬಿಸುತ್ತದೆ; ಮೂಲ ಗಾತ್ರ ಓದುಗರ ಆಯ್ಕೆಯನ್ನು ಗೌರವಿಸಬೇಕು.
CSS ಇಂಚು ಪರದೆಯ ಅಳತೆ ಇಂಚಿಗಿಂತ ಬೇರೆಯಾಗಬಹುದು. CSS ನಲ್ಲಿ 1 in ನಿಖರವಾಗಿ 96 px; W3C ಉಲ್ಲೇಖ ಪಿಕ್ಸೆಲ್ 28 in ದೂರದಿಂದ ಕಾಣುವ 96 DPI ಪರದೆಯ ಪಿಕ್ಸೆಲ್, ಸುಮಾರು 0.0213° ದೃಷ್ಟಿಕೋನ. ಸಾಧನದ ನಕ್ಷೆ ಮತ್ತು ದೂರ ಬದಲಾಗುವುದರಿಂದ ಫೋನ್‌ನಲ್ಲಿ 96 px ಪೆಟ್ಟಿಗೆ ಭೌತಿಕ ಇಂಚಿಗಿಂತ ಚಿಕ್ಕದಾಗಬಹುದು. ನೈಜ ಗಾತ್ರದ ಮುದ್ರಣದಲ್ಲಿ 1 in = 25.4 mm ಅಳತೆಪಟ್ಟಿಗೆ ಹೊಂದಬಹುದು; ಮುದ್ರಣದ ಮಾಪನ ಮತ್ತು ಮಾಪನಾಂಕವೂ ಪರಿಣಾಮ ಬೀರುತ್ತವೆ.
ಈ ಕ್ಯಾಲ್ಕುಲೇಟರ್‌ನಲ್ಲಿ ಸ್ವತಂತ್ರ ಆಧಾರಗಳಿಂದ ಉತ್ತರಗಳನ್ನು ಪಡೆದ 7 ಬಿಡಿಸಿದ ಉದಾಹರಣೆಗಳಿವೆ. ಇವು ಪರೀಕ್ಷಾ ಸಮೂಹದಲ್ಲಿ ನಡೆಯುತ್ತವೆ; ನೀವು ಇಲ್ಲಿಯೂ ನಡೆಸಬಹುದು.