PX, REM, ಮತ್ತು EM ಯೂನಿಟ್ ಪರಿವರ್ತಕ: ಅಗತ್ಯವಿರುವ CSS ಯೂನಿಟ್‌ಗಳನ್ನು ವಿವರಿಸಲಾಗಿದೆ

CSS ಯೂನಿಟ್ ಪರಿವರ್ತನೆಯ ಪರಿಚಯ

CSS ಯೂನಿಟ್‌ಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಮತ್ತು ಪರಿವರ್ತಿಸುವುದು ಪ್ರತಿಸ್ಪಂದನಶೀಲ ವೆಬ್ ವಿನ್ಯಾಸ ಮತ್ತು ಅಭಿವೃದ್ಧಿಗೆ ಅಗತ್ಯವಿದೆ. PX (ಪಿಕ್ಸೆಲ್), REM (ರೂಟ್ ಇಮ್), ಮತ್ತು EM ಯೂನಿಟ್‌ಗಳು ವಿವಿಧ ಸಾಧನಗಳು ಮತ್ತು ಪರದೆ ಗಾತ್ರಗಳಲ್ಲಿ ಅಂಶಗಳನ್ನು ಹೇಗೆ ಗಾತ್ರ ಮತ್ತು ಸ್ಥಾನಗೊಳಿಸುತ್ತವೆ ಎಂಬುದನ್ನು ನಿರ್ಧರಿಸುವ ಮೂಲ ಕಟ್ಟಕಡೆಯಾಗಿವೆ. ಈ ಸಮಗ್ರ ಯೂನಿಟ್ ಪರಿವರ್ತಕ ಸಾಧನವು ಈ ಮೂರು ಪ್ರಮುಖ CSS ಯೂನಿಟ್‌ಗಳ ನಡುವಿನ ಮೌಲ್ಯಗಳನ್ನು ಸುಲಭವಾಗಿ ಅನುವಾದಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ, ನಿಮಗೆ ಹೆಚ್ಚು ಲವಚಿಕ ಮತ್ತು ನಿರ್ವಹಣೀಯ ವೆಬ್ ವಿನ್ಯಾಸಗಳನ್ನು ರಚಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.

ಪಿಕ್ಸೆಲ್‌ಗಳು (PX) ಸ್ಥಿರ ಗಾತ್ರದ ಯೂನಿಟ್‌ಗಳಾಗಿವೆ, ಇವು ಖಚಿತ ನಿಯಂತ್ರಣವನ್ನು ಒದಗಿಸುತ್ತವೆ ಆದರೆ ವಿಸ್ತರಣೆಯನ್ನು ಕಳೆದುಕೊಳ್ಳುತ್ತವೆ, ಆದರೆ REM ಯೂನಿಟ್‌ಗಳು ರೂಟ್ ಅಂಶದ ಫಾಂಟ್ ಗಾತ್ರಕ್ಕೆ ಸಂಬಂಧಿಸಿದಂತೆ ವಿಸ್ತಾರವಾಗುತ್ತವೆ, ಮತ್ತು EM ಯೂನಿಟ್‌ಗಳು ತಮ್ಮ ಪೋಷಕ ಅಂಶದ ಫಾಂಟ್ ಗಾತ್ರಕ್ಕೆ ಸಂಬಂಧಿಸಿದಂತೆ ವಿಸ್ತಾರವಾಗುತ್ತವೆ. ಈ ಯೂನಿಟ್‌ಗಳ ನಡುವಿನ ಪರಿವರ್ತನೆ ಕಷ್ಟಕರವಾಗಬಹುದು, ವಿಶೇಷವಾಗಿ ಸಂಕೀರ್ಣ ವಿನ್ಯಾಸಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವಾಗ ಅಥವಾ ಪಠ್ಯ ಪುನರ್ ಗಾತ್ರಗೊಳಿಸುವಂತಹ ಪ್ರವೇಶಾತಿ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಬೆಂಬಲಿಸುವಾಗ. ನಮ್ಮ PX, REM, ಮತ್ತು EM ಪರಿವರ್ತಕ ಈ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಸರಳಗೊಳಿಸುತ್ತದೆ, ನಿಮಗೆ ಸುಂದರ, ಪ್ರತಿಸ್ಪಂದನಶೀಲ ವಿನ್ಯಾಸಗಳನ್ನು ರಚಿಸಲು ಗಮನ ಹರಿಸಲು ಅವಕಾಶ ನೀಡುತ್ತದೆ.

CSS ಯೂನಿಟ್‌ಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು: PX, REM, ಮತ್ತು EM

ಪಿಕ್ಸೆಲ್‌ಗಳು (PX) ಏನು?

ಪಿಕ್ಸೆಲ್‌ಗಳು (PX) ಅತ್ಯಂತ ಮೂಲ ಮತ್ತು ಸಾಮಾನ್ಯವಾಗಿ ಬಳಸುವ CSS ಯೂನಿಟ್ ಆಗಿವೆ. ಪಿಕ್ಸೆಲ್‌ವು ಡಿಜಿಟಲ್ ಚಿತ್ರ ಗ್ರಿಡ್‌ನಲ್ಲಿ ಒಬ್ಬ ವ್ಯಕ್ತಿಯು ನಿಯಂತ್ರಿಸಬಹುದಾದ ಅತಿದೊಡ್ಡ ಅಂಶವನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ ಮತ್ತು ಪರದೆ ಮೇಲೆ ಅತಿದೊಡ್ಡ ನಿಯಂತ್ರಣವನ್ನು ಒದಗಿಸುತ್ತದೆ. CSS ನಲ್ಲಿ, ಪಿಕ್ಸೆಲ್‌ಗಳು ಸ್ಥಿರ ಗಾತ್ರದ ಅಳತೆಯ ಯೂನಿಟ್ ಅನ್ನು ಒದಗಿಸುತ್ತವೆ, ಇದು ಇತರ ಶ್ರೇಣೀಬದ್ಧತೆಯ ಅಂಶಗಳನ್ನು ಪರಿಗಣಿಸುತ್ತಿಲ್ಲ.

1.element {
2  width: 200px;
3  font-size: 16px;
4  margin: 10px;
5}
6

ಪಿಕ್ಸೆಲ್‌ಗಳ ಪ್ರಮುಖ ಲಕ್ಷಣಗಳು:

ಸ್ವಾಯತ್ತವಾಗಿ ವಿಸ್ತಾರವಾಗದ ಸ್ಥಿರ ಗಾತ್ರದ ಯೂನಿಟ್‌ಗಳು
ಅಂಶಗಳ ಆಯಾಮಗಳನ್ನು ಖಚಿತವಾಗಿ ನಿಯಂತ್ರಿಸುತ್ತವೆ
ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಮತ್ತು ದೃಶ್ಯೀಕರಿಸಲು ಸುಲಭ
ಪ್ರತಿಸ್ಪಂದನಶೀಲ ವಿನ್ಯಾಸ ಮತ್ತು ಪ್ರವೇಶಾತಿಗೆ ಕಡಿಮೆ ಸೂಕ್ತ

REM ಯೂನಿಟ್‌ಗಳು ಏನು?

REM (ರೂಟ್ ಇಮ್) ಯೂನಿಟ್‌ಗಳು ರೂಟ್ ಅಂಶದ ಫಾಂಟ್ ಗಾತ್ರ (ಸಾಮಾನ್ಯವಾಗಿ <html> ಅಂಶ) ಆಧಾರಿತ ಸಂಬಂಧಿತ ಯೂನಿಟ್‌ಗಳಾಗಿವೆ. ಡಿಫಾಲ್ಟ್‌ ಆಗಿ, ಬಹುತೇಕ ಬ್ರೌಸರ್‌ಗಳು ರೂಟ್ ಫಾಂಟ್ ಗಾತ್ರವನ್ನು 16px ಗೆ ಹೊಂದಿಸುತ್ತವೆ, ಇದರಿಂದ 1rem 16px ಗೆ ಸಮಾನವಾಗುತ್ತದೆ, ಇದನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ಬದಲಾಯಿಸದಿದ್ದರೆ.

1html {
2  font-size: 16px; /* ಬಹುತೇಕ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಡಿಫಾಲ್ಟ್ */
3}
4
5.element {
6  width: 12.5rem; /* ಡಿಫಾಲ್ಟ್ ರೂಟ್ ಫಾಂಟ್ ಗಾತ್ರದೊಂದಿಗೆ 200px ಗೆ ಸಮಾನ */
7  font-size: 1rem; /* 16px ಗೆ ಸಮಾನ */
8  margin: 0.625rem; /* 10px ಗೆ ಸಮಾನ */
9}
10

REM ಯೂನಿಟ್‌ಗಳ ಪ್ರಮುಖ ಲಕ್ಷಣಗಳು:

ರೂಟ್ ಅಂಶದ ಫಾಂಟ್ ಗಾತ್ರಕ್ಕೆ ಸಂಬಂಧಿಸಿದಂತೆ ವಿಸ್ತಾರವಾಗುತ್ತವೆ
ದಾಖಲೆಾದ್ಯಾಂತ ಸ್ಥಿರ ಅನುಪಾತಗಳನ್ನು ನಿರ್ವಹಿಸುತ್ತವೆ
ಜಾಗತಿಕ ಫಾಂಟ್ ಗಾತ್ರದ ಸಮಾಯೋಜನೆಗಳ ಮೂಲಕ ಉತ್ತಮ ಪ್ರವೇಶಾತಿಯನ್ನು ಬೆಂಬಲಿಸುತ್ತವೆ
ಪ್ರತಿಸ್ಪಂದನಶೀಲ ವಿನ್ಯಾಸಗಳು ಮತ್ತು ಟೈಪೋಗ್ರಫಿಯಿಗಾಗಿ ಸೂಕ್ತ

EM ಯೂನಿಟ್‌ಗಳು ಏನು?

EM ಯೂನಿಟ್‌ಗಳು ತಮ್ಮ ಪೋಷಕ ಅಂಶದ ಫಾಂಟ್ ಗಾತ್ರಕ್ಕೆ ಸಂಬಂಧಿತ ಯೂನಿಟ್‌ಗಳಾಗಿವೆ. ಪೋಷಕ ಅಂಶಕ್ಕೆ ಯಾವುದೇ ಫಾಂಟ್ ಗಾತ್ರವನ್ನು ನಿರ್ಧರಿಸಲಾಗದಿದ್ದರೆ, EM ಯೂನಿಟ್‌ಗಳು ಪರಂಪರೆಯಾದ ಫಾಂಟ್ ಗಾತ್ರವನ್ನು ಉಲ್ಲೇಖಿಸುತ್ತವೆ.

1.parent {
2  font-size: 20px;
3}
4
5.child {
6  font-size: 0.8em; /* 16px ಗೆ ಸಮಾನ (20px × 0.8) */
7  margin: 0.5em; /* 8px ಗೆ ಸಮಾನ (16px × 0.5) */
8}
9

EM ಯೂನಿಟ್‌ಗಳ ಪ್ರಮುಖ ಲಕ್ಷಣಗಳು:

ತಮ್ಮ ಪೋಷಕ ಅಂಶದ ಫಾಂಟ್ ಗಾತ್ರಕ್ಕೆ ಸಂಬಂಧಿಸಿದಂತೆ ವಿಸ್ತಾರವಾಗುತ್ತವೆ
ನೆಟ್ಟಗೆ ಇರುವಾಗ cascading ಪರಿಣಾಮವನ್ನು ಉಂಟುಮಾಡುತ್ತವೆ
ಘಟಕಗಳಲ್ಲಿ ಪ್ರಮಾಣಿತ ವಿನ್ಯಾಸಗಳನ್ನು ರಚಿಸಲು ಉಪಯುಕ್ತ
ಆಳವಾದ ಅಂಶಗಳೊಂದಿಗೆ ನಿರ್ವಹಿಸಲು ಸಂಕೀರ್ಣವಾಗಬಹುದು

ಪರಿವರ್ತನಾ ಸೂತ್ರಗಳು ಮತ್ತು ಲೆಕ್ಕಾಚಾರಗಳು

PX, REM, ಮತ್ತು EM ಯೂನಿಟ್‌ಗಳ ನಡುವಿನ ಗಣಿತೀಯ ಸಂಬಂಧಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಖಚಿತ ಪರಿವರ್ತನೆಗಾಗಿ ಅಗತ್ಯವಿದೆ. ನಮ್ಮ ಪರಿವರ್ತಕದಲ್ಲಿ ಬಳಸುವ ಸೂತ್ರಗಳು ಇಲ್ಲಿವೆ:

PX ನಿಂದ REM ಗೆ ಪರಿವರ್ತನೆ

ಪಿಕ್ಸೆಲ್‌ಗಳನ್ನು REM ಯೂನಿಟ್‌ಗಳಿಗೆ ಪರಿವರ್ತಿಸಲು, ಪಿಕ್ಸೆಲ್ ಮೌಲ್ಯವನ್ನು ರೂಟ್ ಫಾಂಟ್ ಗಾತ್ರದಿಂದ ಹಂಚಿ:

$REM = \frac{PX}{rootFontSize}$

ಉದಾಹರಣೆಗೆ, ಡಿಫಾಲ್ಟ್ ರೂಟ್ ಫಾಂಟ್ ಗಾತ್ರ 16px ಇರುವಾಗ:

16px = 1rem
24px = 1.5rem
8px = 0.5rem

PX ನಿಂದ EM ಗೆ ಪರಿವರ್ತನೆ

ಪಿಕ್ಸೆಲ್‌ಗಳನ್ನು EM ಯೂನಿಟ್‌ಗಳಿಗೆ ಪರಿವರ್ತಿಸಲು, ಪಿಕ್ಸೆಲ್ ಮೌಲ್ಯವನ್ನು ಪೋಷಕ ಅಂಶದ ಫಾಂಟ್ ಗಾತ್ರದಿಂದ ಹಂಚಿ:

$EM = \frac{PX}{parentFontSize}$

ಉದಾಹರಣೆಗೆ, ಪೋಷಕ ಫಾಂಟ್ ಗಾತ್ರ 16px ಇರುವಾಗ:

16px = 1em
24px = 1.5em
8px = 0.5em

REM ನಿಂದ PX ಗೆ ಪರಿವರ್ತನೆ

REM ಯೂನಿಟ್‌ಗಳನ್ನು ಪಿಕ್ಸೆಲ್‌ಗಳಿಗೆ ಪರಿವರ್ತಿಸಲು, REM ಮೌಲ್ಯವನ್ನು ರೂಟ್ ಫಾಂಟ್ ಗಾತ್ರದಿಂದ ಗುಣಿಸಿ:

$PX = REM \times rootFontSize$

ಉದಾಹರಣೆಗೆ, ಡಿಫಾಲ್ಟ್ ರೂಟ್ ಫಾಂಟ್ ಗಾತ್ರ 16px ಇರುವಾಗ:

1rem = 16px
1.5rem = 24px
0.5rem = 8px

EM ನಿಂದ PX ಗೆ ಪರಿವರ್ತನೆ

EM ಯೂನಿಟ್‌ಗಳನ್ನು ಪಿಕ್ಸೆಲ್‌ಗಳಿಗೆ ಪರಿವರ್ತಿಸಲು, EM ಮೌಲ್ಯವನ್ನು ಪೋಷಕ ಅಂಶದ ಫಾಂಟ್ ಗಾತ್ರದಿಂದ ಗುಣಿಸಿ:

$PX = EM \times parentFontSize$

ಉದಾಹರಣೆಗೆ, ಪೋಷಕ ಫಾಂಟ್ ಗಾತ್ರ 16px ಇರುವಾಗ:

1em = 16px
1.5em = 24px
0.5em = 8px

REM ನಿಂದ EM ಗೆ ಪರಿವರ್ತನೆ

REM ಯೂನಿಟ್‌ಗಳನ್ನು EM ಯೂನಿಟ್‌ಗಳಿಗೆ ಪರಿವರ್ತಿಸಲು, ನೀವು ರೂಟ್ ಫಾಂಟ್ ಗಾತ್ರ ಮತ್ತು ಪೋಷಕ ಅಂಶದ ಫಾಂಟ್ ಗಾತ್ರವನ್ನು ಪರಿಗಣಿಸಬೇಕಾಗಿದೆ:

$EM = REM \times \frac{rootFontSize}{parentFontSize}$

ರೂಟ್ ಮತ್ತು ಪೋಷಕ ಫಾಂಟ್ ಗಾತ್ರಗಳು ಒಂದೇ ಆಗಿದ್ದರೆ (ಉದಾಹರಣೆಗೆ, 16px), 1rem = 1em.

EM ನಿಂದ REM ಗೆ ಪರಿವರ್ತನೆ

EM ಯೂನಿಟ್‌ಗಳನ್ನು REM ಯೂನಿಟ್‌ಗಳಿಗೆ ಪರಿವರ್ತಿಸಲು, ಈ ಸೂತ್ರವನ್ನು ಬಳಸಿರಿ:

$REM = EM \times \frac{parentFontSize}{rootFontSize}$

ಮರುಕಟ್ಟಿದಂತೆ, ಎರಡೂ ಫಾಂಟ್ ಗಾತ್ರಗಳು ಸಮಾನವಾದಾಗ, 1em = 1rem.

PX, REM, ಮತ್ತು EM ಯೂನಿಟ್ ಪರಿವರ್ತಕವನ್ನು ಬಳಸುವುದು ಹೇಗೆ

ನಮ್ಮ ಯೂನಿಟ್ ಪರಿವರ್ತಕ ಸಾಧನವು PX, REM, ಮತ್ತು EM ಯೂನಿಟ್‌ಗಳ ನಡುವಿನ ಮೌಲ್ಯಗಳನ್ನು ಅನುವಾದಿಸಲು ಸುಲಭವಾಗಿಸುತ್ತದೆ. ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಪರಿವರ್ತಕವನ್ನು ಬಳಸಲು ಹೀಗೆ ಹಂತ ಹಂತವಾಗಿ ಸಾಗಿರಿ:

ಮೂಲ ಬಳಸುವಿಕೆ

ಯಾವುದೇ ಇನ್‌ಪುಟ್ ಕ್ಷೇತ್ರದಲ್ಲಿ ಮೌಲ್ಯವನ್ನು ನಮೂದಿಸಿ (PX, REM, ಅಥವಾ EM)
ಪರಿವರ್ತಕವು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಲೆಕ್ಕಹಾಕುತ್ತದೆ ಮತ್ತು ಇತರ ಎರಡು ಯೂನಿಟ್‌ಗಳಲ್ಲಿ ಸಮಾನ ಮೌಲ್ಯಗಳನ್ನು ತೋರಿಸುತ್ತದೆ
ರೂಟ್ ಫಾಂಟ್ ಗಾತ್ರವನ್ನು ಹೊಂದಿಸಿ (ಡಿಫಾಲ್ಟ್: 16px) REM ಪರಿವರ್ತನೆಗಳನ್ನು ಹೇಗೆ ಪ್ರಭಾವಿತ ಮಾಡುತ್ತದೆ ಎಂದು ನೋಡಲು
ಪೋಷಕ ಫಾಂಟ್ ಗಾತ್ರವನ್ನು ಹೊಂದಿಸಿ (ಡಿಫಾಲ್ಟ್: 16px) EM ಪರಿವರ್ತನೆಗಳನ್ನು ಹೇಗೆ ಪ್ರಭಾವಿತ ಮಾಡುತ್ತದೆ ಎಂದು ನೋಡಲು
ಪ್ರತಿ ಕ್ಷೇತ್ರದ ಪಕ್ಕದ ನಕಲಿ ಬಟನ್ ಅನ್ನು ಬಳಸಿಕೊಂಡು ನಿಮ್ಮ ಕ್ಲಿಪ್‌ಬೋರ್ಡ್‌ಗೆ ಮೌಲ್ಯವನ್ನು ನಕಲಿಸಿ

ಉನ್ನತ ವೈಶಿಷ್ಟ್ಯಗಳು

ದೃಶ್ಯಾತ್ಮಕ ಹೋಲಣೆ: ಸಾಧನವು ಪ್ರತಿ ಯೂನಿಟ್‌ಗಳ ಸಂಬಂಧಿತ ಗಾತ್ರಗಳ ದೃಶ್ಯಾತ್ಮಕ ಪ್ರತಿನಿಧಾನವನ್ನು ಒದಗಿಸುತ್ತದೆ
ನಿಖರತೆಯ ನಿಯಂತ್ರಣ: ಎಲ್ಲಾ ಲೆಕ್ಕಾಚಾರಗಳು ನಿಖರತೆಯಿಗಾಗಿ 4 ದಶಮಾಂಶ ಸ್ಥಳಗಳನ್ನು ನಿರ್ವಹಿಸುತ್ತವೆ
ಊರಿನ ಮೌಲ್ಯಗಳು: ಪರಿವರ್ತಕವು ನೆಗೆಟಿವ್ ಮೌಲ್ಯಗಳನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆ, ಇದು CSS ನಲ್ಲಿ ಮಾರ್ಜಿನ್‌ಗಳಂತಹ ಗುಣಾಂಕಗಳಿಗೆ ಮಾನ್ಯವಾಗಿದೆ
ವಾಸ್ತವಿಕ ಕಾಲದಲ್ಲಿ ನವೀಕರಣಗಳು: ಇನ್‌ಪುಟ್ ಮೌಲ್ಯಗಳು ಅಥವಾ ಫಾಂಟ್ ಗಾತ್ರದ ಸೆಟಿಂಗ್‌ಗಳಲ್ಲಿ ಯಾವುದೇ ಬದಲಾವಣೆ ಎಲ್ಲಾ ಲೆಕ್ಕಾಚಾರಗಳನ್ನು ತಕ್ಷಣವೇ ನವೀಕರಿಸುತ್ತದೆ

ನಿಖರವಾದ ಪರಿವರ್ತನೆಗಳಿಗೆ ಸಲಹೆಗಳು

ಅತ್ಯಂತ ನಿಖರ REM ಪರಿವರ್ತನೆಗಳಿಗೆ, ರೂಟ್ ಫಾಂಟ್ ಗಾತ್ರವನ್ನು ನಿಮ್ಮ ಯೋಜನೆಯ <html> ಫಾಂಟ್-ಸೈಜ್ ಮೌಲ್ಯಕ್ಕೆ ಹೊಂದಿಸಿ
ನಿಖರ EM ಪರಿವರ್ತನೆಗಳಿಗೆ, ಪೋಷಕ ಫಾಂಟ್ ಗಾತ್ರವನ್ನು ನೀವು ಕೆಲಸ ಮಾಡುತ್ತಿರುವ ಪೋಷಕ ಅಂಶದ ಫಾಂಟ್ ಗಾತ್ರಕ್ಕೆ ಹೊಂದಿಸಿ
ಬ್ರೌಸರ್ ಡಿಫಾಲ್ಟ್ ಫಾಂಟ್ ಗಾತ್ರಗಳು ವಿಭಿನ್ನವಾಗಬಹುದು, ಆದರೆ 16px ಅತ್ಯಂತ ಸಾಮಾನ್ಯ ಡಿಫಾಲ್ಟ್

CSS ಯೂನಿಟ್ ಪರಿವರ್ತನೆಗೆ ವಾಸ್ತವಿಕ ಬಳಕೆದಾರಿಕೆಗಳು

ಪ್ರತಿಯೊಬ್ಬ CSS ಯೂನಿಟ್‌ಗಳ ಬಳಕೆ ಮತ್ತು ಪರಿವರ್ತನೆಯಾಗಿರುವಾಗ, ಪರಿಣಾಮಕಾರಿ ವೆಬ್ ಅಭಿವೃದ್ಧಿಗೆ ಅಗತ್ಯವಿದೆ. ನಮ್ಮ ಯೂನಿಟ್ ಪರಿವರ್ತಕವು ಅಮೂಲ್ಯವಾಗಿದೆ ಎಂಬುದನ್ನು ತೋರಿಸಲು ಕೆಲವು ವಾಸ್ತವಿಕ ಅನ್ವಯಗಳು ಮತ್ತು ದೃಶ್ಯಗಳು ಇಲ್ಲಿವೆ:

ಪ್ರತಿಸ್ಪಂದನಶೀಲ ವೆಬ್ ವಿನ್ಯಾಸ

ಯೂನಿಟ್‌ಗಳ ನಡುವಿನ ಪರಿವರ್ತನೆ ಪ್ರತಿಸ್ಪಂದನಶೀಲ ವಿನ್ಯಾಸಗಳನ್ನು ರಚಿಸಲು ಅಗತ್ಯವಾಗಿದೆ:

ಮೊಬೈಲ್-ಮೊದಲು ಹಾದಿ: ಪಿಕ್ಸೆಲ್‌ಗಳಲ್ಲಿ ಆಧಾರಿತ ವಿನ್ಯಾಸವನ್ನು ಪ್ರಾರಂಭಿಸಿ, ನಂತರ ವಿಸ್ತಾರಕ್ಕಾಗಿ ಸಂಬಂಧಿತ ಯೂನಿಟ್‌ಗಳಿಗೆ ಪರಿವರ್ತಿಸಿ
ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್ ನಿರ್ವಹಣೆ: ವಿಭಿನ್ನ ವೀಕ್ಷಣಾ ಪರಿಧಿಗಳಾದಂತೆ REM ಗಳನ್ನು ಬಳಸುವುದು ಖಚಿತವಾದ ಅಂತರಗಳನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ
ಘಟಕ ವಿಸ್ತಾರ: ವೀಕ್ಷಣಾ ಪರಿಧಿ ಬದಲಾಯಿಸಿದಾಗ UI ಅಂಶಗಳು ಪ್ರಮಾಣಿತ ಸಂಬಂಧಗಳನ್ನು ನಿರ್ವಹಿಸುತ್ತವೆ

1/* ಸ್ಥಿರ ಪಿಕ್ಸೆಲ್ ಮೌಲ್ಯಗಳನ್ನು ಪ್ರತಿಸ್ಪಂದನಶೀಲ REM ಯೂನಿಟ್‌ಗಳಿಗೆ ಪರಿವರ್ತಿಸಿ */
2.container {
3  /* From: padding: 20px; */
4  padding: 1.25rem; /* 20px ÷ 16px = 1.25rem */
5  
6  /* From: margin-bottom: 32px; */
7  margin-bottom: 2rem; /* 32px ÷ 16px = 2rem */
8}
9

ಪ್ರವೇಶಾತಿ ಸುಧಾರಣೆಗಳು

ಸಂಬಂಧಿತ ಯೂನಿಟ್‌ಗಳನ್ನು ಬಳಸುವುದು ಬಳಕೆದಾರರ ಆಯ್ಕೆಯನ್ನು ಗೌರವಿಸುವ ಮೂಲಕ ಪ್ರವೇಶಾತಿಯನ್ನು ಸುಧಾರಿಸುತ್ತದೆ:

ಪಠ್ಯ ಪುನರ್ ಗಾತ್ರಗೊಳಿಸುವಿಕೆ: ಬಳಕೆದಾರರು ತಮ್ಮ ಬ್ರೌಸರ್‌ನ ಫಾಂಟ್ ಗಾತ್ರವನ್ನು ಬದಲಾಯಿಸಿದಾಗ, REM ಆಧಾರಿತ ವಿನ್ಯಾಸಗಳು ಸೂಕ್ತವಾಗಿ ಹೊಂದಿಕೊಳ್ಳುತ್ತವೆ
ಜೂಮ್ ಕಾರ್ಯಕ್ಷಮತೆ: ಸಂಬಂಧಿತ ಯೂನಿಟ್‌ಗಳು ಬಳಕೆದಾರರು ಜೂಮ್ ಮಾಡಿದಾಗ ವಿನ್ಯಾಸಗಳನ್ನು ಪ್ರಮಾಣಿತವಾಗಿ ಉಳಿಸುತ್ತವೆ
ಬಳಕೆದಾರರ ಆಯ್ಕೆ ಗೌರವ: ಸಂಬಂಧಿತ ಯೂನಿಟ್‌ಗಳಿಗೆ ಆಧಾರಿತ ವಿನ್ಯಾಸಗಳು ಬಳಕೆದಾರರ ಡಿಫಾಲ್ಟ್ ಫಾಂಟ್ ಗಾತ್ರದ ಸೆಟಿಂಗ್‌ಗಳನ್ನು ಗೌರವಿಸುತ್ತವೆ

ಘಟಕ ಆಧಾರಿತ ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಗಳು

ಆಧುನಿಕ ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಗಳು ಯೋಚನೆಯಾದ ಯೂನಿಟ್ ಬಳಕೆಯಿಂದ ಪ್ರಯೋಜನ ಪಡೆಯುತ್ತವೆ:

ಸ್ಥಿರ ಘಟಕಗಳು: ಜಾಗತಿಕ ಸ್ಥಳ ಮತ್ತು ಗಾತ್ರದ ಸಮ್ಮಿಲನಕ್ಕಾಗಿ REM ಬಳಸಿರಿ
ಸ್ವಾಯತ್ತವಾಗಿ ಒಳಗೊಂಡ ಮಾಡ್ಯೂಲ್‌ಗಳು: EM ಅನ್ನು ಬಳಸುವುದು ಪೋಷಕ ಘಟಕಗಳೊಂದಿಗೆ ವಿಸ್ತಾರಗೊಳ್ಳಬೇಕು
ಡಿಸೈನ್ ಟೋಕನ್‌ಗಳು: ವಿಭಿನ್ನ ಸಂದರ್ಭಗಳಲ್ಲಿ ಡಿಸೈನ್ ಟೋಕನ್‌ಗಳನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸುವಾಗ ಯೂನಿಟ್‌ಗಳ ನಡುವೆ ಪರಿವರ್ತನೆ ಮಾಡಿ

ಟೈಪೋಗ್ರಫಿ ವ್ಯವಸ್ಥೆಗಳು

ಸಮರಸ ಟೈಪೋಗ್ರಫಿ ರಚಿಸಲು ಯೂನಿಟ್ ಆಯ್ಕೆ ಮಾಡಲು ಜಾಗರೂಕತೆ ಅಗತ್ಯವಿದೆ:

ಟೈಪ್ ಸ್ಕೇಲ್‌ಗಳು: ಸಮಾನಾಂತರ ಪ್ರಗತಿಗಾಗಿ REM ನಲ್ಲಿ ಟೈಪೋಗ್ರಾಫಿಕ್ ಸ್ಕೇಲ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಿ
ಗೋಚಿ ಎತ್ತರಗಳು: ಪ್ರಮಾಣಿತ ಗೋಚಿ ಎತ್ತರಗಳಿಗಾಗಿ ಯೂನಿಟ್‌ರಹಿತ ಮೌಲ್ಯಗಳನ್ನು ಅಥವಾ EM ಅನ್ನು ಬಳಸಿರಿ
ಪ್ರತಿಸ್ಪಂದನಶೀಲ ಪಠ್ಯ: ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ಗಳಲ್ಲಿ ಫಾಂಟ್ ಗಾತ್ರಗಳನ್ನು ಹೊಂದಿಸಿ, ಪ್ರಮಾಣಿತ ಅನುಪಾತಗಳನ್ನು ಉಳಿಸಿಕೊಳ್ಳಿ

1/* REM ಯೂನಿಟ್‌ಗಳನ್ನು ಬಳಸುವ ಟೈಪೋಗ್ರಫಿ ವ್ಯವಸ್ಥೆ */
2h1 { font-size: 2.5rem; }    /* 40px */
3h2 { font-size: 2rem; }      /* 32px */
4h3 { font-size: 1.5rem; }    /* 24px */
5h4 { font-size: 1.25rem; }   /* 20px */
6p { font-size: 1rem; }       /* 16px */
7small { font-size: 0.875rem; } /* 14px */
8

ಪಿಕ್ಸೆಲ್-ಪರಿಪೂರ್ಣ ವಿನ್ಯಾಸಗಳು

ಫಿಗ್ಮಾ ಅಥವಾ ಫೋಟೋಶಾಪ್‌ನಂತಹ ಸಾಧನಗಳಿಂದ ವಿನ್ಯಾಸಗಳನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸುವಾಗ:

ವಿನ್ಯಾಸ ಹ್ಯಾಂಡಾಫ್: ವಿನ್ಯಾಸ ಫೈಲ್‌ಗಳಿಂದ ಪಿಕ್ಸೆಲ್ ಮೌಲ್ಯಗಳನ್ನು REM/EM ಗೆ ಪರಿವರ್ತಿಸಿ
ನಿಖರತೆಯನ್ನು ಕಾಪಾಡುವುದು: ಸಂಬಂಧಿತ ಯೂನಿಟ್‌ಗಳನ್ನು ಬಳಸಿದಾಗ ಖಚಿತ ಸ್ಥಳ ಮತ್ತು ಗಾತ್ರವನ್ನು ಖಚಿತಪಡಿಸಿ
ಡಿಸೈನ್ ಸಿಸ್ಟಮ್ ಏಕೀಕರಣ: ಪಿಕ್ಸೆಲ್ ಆಧಾರಿತ ಡಿಸೈನ್ ಟೋಕನ್‌ಗಳನ್ನು ಸಂಬಂಧಿತ ಯೂನಿಟ್‌ಗಳಿಗೆ ಅನುವಾದಿಸಿ

ಪರ್ಯಾಯ CSS ಯೂನಿಟ್‌ಗಳು

PX, REM, ಮತ್ತು EM ಅತ್ಯಂತ ಸಾಮಾನ್ಯ ಯೂನಿಟ್‌ಗಳಾಗಿದ್ದರೂ, ಪರಿಗಣಿಸಲು ಇನ್ನೂ ಆಯ್ಕೆಗಳು ಇವೆ:

ವೀಕ್ಷಣಾ ಯೂನಿಟ್‌ಗಳು (VW, VH)

VW (ವೀಕ್ಷಣಾ ಅಗಲ): 1vw ವೀಕ್ಷಣಾ ಅಗಲದ 1% ಗೆ ಸಮಾನ
VH (ವೀಕ್ಷಣಾ ಎತ್ತರ): 1vh ವೀಕ್ಷಣಾ ಎತ್ತರದ 1% ಗೆ ಸಮಾನ
ಬಳಕೆದಾರಿಕೆ: ವೀಕ್ಷಣಾ ಗಾತ್ರದೊಂದಿಗೆ ನೇರವಾಗಿ ವಿಸ್ತಾರಗೊಳ್ಳುವ ಅಂಶಗಳನ್ನು ರಚಿಸುತ್ತವೆ

ಶೇಕಡಾವಾರು (%)

ಪೋಷಕ ಅಂಶದ ಆಯಾಮಗಳಿಗೆ ಸಂಬಂಧಿತ
ಬಳಕೆದಾರಿಕೆ: ದ್ರವ ವಿನ್ಯಾಸಗಳು ಮತ್ತು ಪ್ರತಿಸ್ಪಂದನಶೀಲ ಅಗಲಗಳು

CH ಯೂನಿಟ್‌ಗಳು

"0" ಅಕ್ಷರದ ಅಗಲವನ್ನು ಆಧರಿತ
ಬಳಕೆದಾರಿಕೆ: ನಿರ್ದಿಷ್ಟ ಅಕ್ಷರ ಸಂಖ್ಯೆಯೊಂದಿಗೆ ಸಾಲುಗಳ ಸಂಖ್ಯೆಯೊಂದಿಗೆ ಕಂಟೈನರ್‌ಗಳನ್ನು ರಚಿಸುತ್ತವೆ

EX ಯೂನಿಟ್‌ಗಳು

ಕೀಳ್ಮಟ್ಟದ "x" ಅಕ್ಷರದ ಎತ್ತರವನ್ನು ಆಧರಿತ
ಬಳಕೆದಾರಿಕೆ: ಟೈಪೋಗ್ರಫಿಯನ್ನು ಸೂಕ್ಷ್ಮವಾಗಿ ಹೊಂದಿಸಲು, ವಿಶೇಷವಾಗಿ x-ಎತ್ತರದ ಸುಧಾರಣೆಗಳಿಗೆ

ವೆಬ್ ಅಭಿವೃದ್ಧಿಯಲ್ಲಿ CSS ಯೂನಿಟ್‌ಗಳ ಅಭಿವೃದ್ಧಿ

CSS ಯೂನಿಟ್‌ಗಳ ಇತಿಹಾಸವು ವೆಬ್ ವಿನ್ಯಾಸದ ವ್ಯಾಪಕ ಅಭಿವೃದ್ಧಿಯನ್ನು ಪ್ರತಿಬಿಂಬಿಸುತ್ತದೆ, ಸ್ಥಿರ ವಿನ್ಯಾಸಗಳಿಂದ ಇಂದಿನ ಪ್ರತಿಸ್ಪಂದನಶೀಲ, ಪ್ರವೇಶಾತಿ ಆಧಾರಿತ ವಿಧಾನಗಳಿಗೆ.

ಪ್ರಾರಂಭದ ವೆಬ್ ವಿನ್ಯಾಸ (1990 ರ ದಶಕ)

CSS ಯ ಆರಂಭದ ದಿನಗಳಲ್ಲಿ, ಪಿಕ್ಸೆಲ್‌ಗಳು ಪ್ರಧಾನವಾಗಿದ್ದವು. ವೆಬ್ ವಿನ್ಯಾಸಕರು ಸಾಮಾನ್ಯವಾಗಿ 640px ಅಥವಾ 800px ಅಗಲದ ಸ್ಥಿರ ಅಗಲದ ವಿನ್ಯಾಸಗಳನ್ನು ರಚಿಸುತ್ತಿದ್ದರು. ಪ್ರವೇಶಾತಿ ಮತ್ತು ಸಾಧನ ವೈವಿಧ್ಯತೆಯು ಪ್ರಮುಖ ಚಿಂತನಾಗಿರಲಿಲ್ಲ, ಮತ್ತು ಪಿಕ್ಸೆಲ್-ಪರಿಪೂರ್ಣ ನಿಯಂತ್ರಣವು ಪ್ರಧಾನ ಗುರಿಯಾಗಿತ್ತು.

ದ್ರವ ವಿನ್ಯಾಸಗಳ ಏರಿಕೆ (2000 ರ ಆರಂಭ)

ಪರದೆಗಳ ಗಾತ್ರಗಳು ವಿಭಿನ್ನವಾಗಿರುವಾಗ, ಶೇಕಡಾವಾರು ಆಧಾರಿತ ವಿನ್ಯಾಸಗಳು ಜನಪ್ರಿಯತೆ ಪಡೆದವು. ವಿನ್ಯಾಸಕರು ಹೆಚ್ಚು ಲವಚಿಕ ವಿನ್ಯಾಸಗಳನ್ನು ರಚಿಸಲು ಪ್ರಾರಂಭಿಸಿದರು, ಆದರೆ ಪಠ್ಯವು ಸಾಮಾನ್ಯವಾಗಿ ಪಿಕ್ಸೆಲ್ ಯೂನಿಟ್‌ಗಳಲ್ಲಿ ಉಳಿಯಿತು. ಈ ಕಾಲದಲ್ಲಿ CSS ನಲ್ಲಿ EM ಯೂನಿಟ್‌ಗಳ ಪರಿಚಯವು ನಡೆಯಿತು, ಆದರೆ cascading ಫಾಂಟ್ ಗಾತ್ರಗಳನ್ನು ನಿರ್ವಹಿಸುವ ಸಂಕೀರ್ಣತೆಯ ಕಾರಣದಿಂದ ಅದನ್ನು ಸ್ವೀಕರಿಸುವುದು ಸೀಮಿತವಾಗಿತ್ತು.

ಮೊಬೈಲ್ ಕ್ರಾಂತಿ (2007-2010)

2007 ರಲ್ಲಿ ಐಫೋನ್ ಪರಿಚಯವು ವೆಬ್ ವಿನ್ಯಾಸವನ್ನು ಪರಿವರ್ತಿತಗೊಳಿಸಿತು. ಹಠಾತ್, 320px ಅಗಲದಂತಹ ಸಣ್ಣ ಪರದೆಗಳಲ್ಲಿ ವೆಬ್‌ಸೈಟ್‌ಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು ಅಗತ್ಯವಾಯಿತು. ಇದು ಪ್ರತಿಸ್ಪಂದನಶೀಲ ವಿನ್ಯಾಸ ತಂತ್ರಜ್ಞಾನಗಳಿಗೆ ಆಸಕ್ತಿಯನ್ನು ಪ್ರಾರಂಭಿಸಿತು ಮತ್ತು ಸಂಬಂಧಿತ ಯೂನಿಟ್‌ಗಳಿಗೆ. EM ಯೂನಿಟ್‌ಗಳ ಮಿತಿಗಳು (ವಿಶೇಷವಾಗಿ cascading ಪರಿಣಾಮ) ಸಂಕೀರ್ಣ ವಿನ್ಯಾಸಗಳಾಗುವಾಗ ಹೆಚ್ಚು ಸ್ಪಷ್ಟವಾಗುತ್ತವೆ.

ಪ್ರತಿಸ್ಪಂದನಶೀಲ ವೆಬ್ ವಿನ್ಯಾಸ ಯುಗ (2010-2015)

2010 ರಲ್ಲಿ ಎಥನ್ ಮಾರ್ಕೊಟ್ನ ಪ್ರತಿಸ್ಪಂದನಶೀಲ ವೆಬ್ ವಿನ್ಯಾಸದ ಕುರಿತು ಪ್ರಭಾವಶೀಲ ಲೇಖನವು ಅಭಿವೃದ್ಧಿಪಡಕರಿಗೆ CSS ಯೂನಿಟ್‌ಗಳಿಗೆ ಹೇಗೆ ಹತ್ತಿರವಾಗಬೇಕೆಂದು ಬದಲಾಯಿಸಿತು. REM ಯೂನಿಟ್ CSS3 ನಲ್ಲಿ ಪರಿಚಯಿಸಲಾಯಿತು, cascading EM ಯೂನಿಟ್‌ಗಳ ಸಂಕೀರ್ಣತೆಯು ಇಲ್ಲದೆ ಸಂಬಂಧಿತ ವಿಸ್ತಾರವನ್ನು ಒದಗಿಸುತ್ತವೆ. ಈ ಸಮಯದಲ್ಲಿ REM ಯೂನಿಟ್‌ಗಳಿಗೆ ಬ್ರೌಸರ್ ಬೆಂಬಲವು ಸ್ಥಿರವಾಗಿ ಬೆಳೆಯಿತು.

ಆಧುನಿಕ CSS ವಿಧಾನಗಳು (2015-ಪ್ರಸ್ತುತ)

ಇಂದಿನ ವೆಬ್ ಅಭಿವೃದ್ಧಿ ವಿಭಿನ್ನ ಉದ್ದೇಶಗಳಿಗೆ ಯೂನಿಟ್‌ಗಳ ಮಿಶ್ರಣವನ್ನು ಒಪ್ಪಿಸುತ್ತದೆ:

ಜಾಗತಿಕ ಸಮ್ಮಿಲನ ಮತ್ತು ಪ್ರವೇಶಾತಿಗೆ REM ಯೂನಿಟ್‌ಗಳು
ಘಟಕ-ಆಧಾರಿತ ವಿಸ್ತಾರಕ್ಕಾಗಿ EM ಯೂನಿಟ್‌ಗಳು
ಗಡಿಗಳನ್ನು ಮತ್ತು ಸಣ್ಣ ವಿವರಗಳಿಗೆ ಪಿಕ್ಸೆಲ್‌ಗಳು
ವೀಕ್ಷಣಾ ಯೂನಿಟ್‌ಗಳು ನಿಜವಾದ ಪ್ರತಿಸ್ಪಂದನಶೀಲ ಅಂಶಗಳಿಗೆ
CSS calc() ಕಾರ್ಯವನ್ನು ವಿಭಿನ್ನ ಯೂನಿಟ್ ಪ್ರಕಾರಗಳನ್ನು ಸಂಯೋಜಿಸಲು

ಈ ಅಭಿವೃದ್ಧಿಯು ಸ್ಥಿರ ವಿನ್ಯಾಸದಿಂದ ಅನೇಕ ಸಾಧನಗಳು ಮತ್ತು ಸಂದರ್ಭಗಳಲ್ಲಿ ಕೆಲಸ ಮಾಡಲು ಅಗತ್ಯವಿರುವ ಸಂಕೀರ್ಣ ಅಪ್ಲಿಕೇಶನ್ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್‌ಗೆ ವೆಬ್‌ನ್ನು ಪರಿವರ್ತಿಸಲು ಪ್ರತಿಬಿಂಬಿಸುತ್ತದೆ.

ಯೂನಿಟ್ ಪರಿವರ್ತನೆಗೆ ಕೋಡ್ ಉದಾಹರಣೆಗಳು

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಯೂನಿಟ್ ಪರಿವರ್ತಕ ಕಾರ್ಯಗಳು

1// PX, REM, ಮತ್ತು EM ಯೂನಿಟ್‌ಗಳ ನಡುವಿನ ಪರಿವರ್ತನೆ
2const pxToRem = (px, rootFontSize = 16) => {
3  return px / rootFontSize;
4};
5
6const pxToEm = (px, parentFontSize = 16) => {
7  return px / parentFontSize;
8};
9
10const remToPx = (rem, rootFontSize = 16) => {
11  return rem * rootFontSize;
12};
13
14const emToPx = (em, parentFontSize = 16) => {
15  return em * parentFontSize;
16};
17
18const remToEm = (rem, rootFontSize = 16, parentFontSize = 16) => {
19  return rem * (rootFontSize / parentFontSize);
20};
21
22const emToRem = (em, parentFontSize = 16, rootFontSize = 16) => {
23  return em * (parentFontSize / rootFontSize);
24};
25
26// ಉದಾಹರಣೆ ಬಳಸಿಕೊಂಡು
27console.log(pxToRem(24));  // 1.5
28console.log(remToPx(1.5)); // 24
29console.log(pxToEm(24, 24)); // 1
30console.log(remToEm(2, 16, 32)); // 1
31

CSS ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿ ಯೂನಿಟ್ ಪರಿವರ್ತನೆ

1:root {
2  /* ಆಧಾರ ಫಾಂಟ್ ಗಾತ್ರಗಳು */
3  --root-font-size: 16px;
4  --base-font-size: var(--root-font-size);
5  
6  /* ಸಾಮಾನ್ಯ ಪಿಕ್ಸೆಲ್ ಮೌಲ್ಯಗಳು REM ಗೆ ಪರಿವರ್ತಿಸಲಾಗಿದೆ */
7  --space-4px: 0.25rem;
8  --space-8px: 0.5rem;
9  --space-16px: 1rem;
10  --space-24px: 1.5rem;
11  --space-32px: 2rem;
12  --space-48px: 3rem;
13  
14  /* ಟೈಪೋಗ್ರಫಿ ಸ್ಕೇಲ್ */
15  --text-xs: 0.75rem;    /* 12px */
16  --text-sm: 0.875rem;   /* 14px */
17  --text-base: 1rem;     /* 16px */
18  --text-lg: 1.125rem;   /* 18px */
19  --text-xl: 1.25rem;    /* 20px */
20  --text-2xl: 1.5rem;    /* 24px */
21}
22
23/* ಬಳಸುವ ಉದಾಹರಣೆ */
24.card {
25  padding: var(--space-16px);
26  margin-bottom: var(--space-24px);
27  font-size: var(--text-base);
28}
29
30.card-title {
31  font-size: var(--text-xl);
32  margin-bottom: var(--space-8px);
33}
34

SCSS ಮಿಕ್ಸಿನ್‌ಗಳಿಗಾಗಿ ಯೂನಿಟ್ ಪರಿವರ್ತನೆ

1// SCSS ಕಾರ್ಯಗಳು ಯೂನಿಟ್ ಪರಿವರ್ತನೆಗಾಗಿ
2@function px-to-rem($px, $root-font-size: 16) {
3  @return ($px / $root-font-size) * 1rem;
4}
5
6@function px-to-em($px, $parent-font-size: 16) {
7  @return ($px / $parent-font-size) * 1em;
8}
9
10@function rem-to-px($rem, $root-font-size: 16) {
11  @return $rem * $root-font-size * 1px;
12}
13
14// ಬಳಸುವ ಉದಾಹರಣೆ
15.element {
16  padding: px-to-rem(20);
17  margin: px-to-rem(32);
18  font-size: px-to-rem(18);
19  
20  .nested {
21    // EM ಪರಿವರ್ತನೆಗಾಗಿ ಪೋಷಕ ಫಾಂಟ್ ಗಾತ್ರ (18px) ಬಳಸುವುದು
22    padding: px-to-em(16, 18);
23    margin-bottom: px-to-em(24, 18);
24  }
25}
26

ಪೈಥಾನ್ ಯೂನಿಟ್ ಪರಿವರ್ತಕ

1def px_to_rem(px, root_font_size=16):
2    """ಪಿಕ್ಸೆಲ್‌ಗಳನ್ನು REM ಯೂನಿಟ್‌ಗಳಿಗೆ ಪರಿವರ್ತಿಸಿ"""
3    return px / root_font_size
4
5def rem_to_px(rem, root_font_size=16):
6    """REM ಯೂನಿಟ್‌ಗಳನ್ನು ಪಿಕ್ಸೆಲ್‌ಗಳಿಗೆ ಪರಿವರ್ತಿಸಿ"""
7    return rem * root_font_size
8
9def px_to_em(px, parent_font_size=16):
10    """ಪಿಕ್ಸೆಲ್‌ಗಳನ್ನು EM ಯೂನಿಟ್‌ಗಳಿಗೆ ಪರಿವರ್ತಿಸಿ"""
11    return px / parent_font_size
12
13def em_to_px(em, parent_font_size=16):
14    """EM ಯೂನಿಟ್‌ಗಳನ್ನು ಪಿಕ್ಸೆಲ್‌ಗಳಿಗೆ ಪರಿವರ್ತಿಸಿ"""
15    return em * parent_font_size
16
17# ಉದಾಹರಣೆ ಬಳಸಿಕೊಂಡು
18print(f"16px = {px_to_rem(16)}rem")  # 16px = 1.0rem
19print(f"2rem = {rem_to_px(2)}px")    # 2rem = 32px
20print(f"24px = {px_to_em(24, 16)}em")  # 24px = 1.5em
21

ಸಾಮಾನ್ಯವಾಗಿ ಕೇಳುವ ಪ್ರಶ್ನೆಗಳು

REM ಮತ್ತು EM ಯೂನಿಟ್‌ಗಳ ನಡುವಿನ ವ್ಯತ್ಯಾಸವೇನು?

REM (ರೂಟ್ ಇಮ್) ಯೂನಿಟ್‌ಗಳು ರೂಟ್ ಅಂಶದ ಫಾಂಟ್ ಗಾತ್ರಕ್ಕೆ (ಸಾಮಾನ್ಯವಾಗಿ <html> ಅಂಶ) ಸಂಬಂಧಿತವಾಗಿವೆ, ಆದರೆ EM ಯೂನಿಟ್‌ಗಳು ತಮ್ಮ ಪೋಷಕ ಅಂಶದ ಫಾಂಟ್ ಗಾತ್ರಕ್ಕೆ ಸಂಬಂಧಿತವಾಗಿವೆ. ಈ ಪ್ರಮುಖ ವ್ಯತ್ಯಾಸವು REM ಯೂನಿಟ್‌ಗಳು ನಿಮ್ಮ ದಾಖಲೆಾದ್ಯಾಂತ ಸ್ಥಿರ ಗಾತ್ರವನ್ನು ನಿರ್ವಹಿಸುತ್ತವೆ, ಆದರೆ EM ಯೂನಿಟ್‌ಗಳು ಅಂಶಗಳು ನೆಟ್ಟಗೆ ಇರುವಾಗ ಸಂಕೀರ್ಣ ಪರಿಣಾಮವನ್ನು ಉಂಟುಮಾಡುತ್ತವೆ ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಸುತ್ತದೆ.

ಪ್ರತಿಸ್ಪಂದನಶೀಲ ವಿನ್ಯಾಸಕ್ಕಾಗಿ ಉತ್ತಮ CSS ಯೂನಿಟ್ ಯಾವುದು?

ಎಲ್ಲಾ ಪರಿಸ್ಥಿತಿಗಳಿಗೆ "ಉತ್ತಮ" ಯೂನಿಟ್ ಇಲ್ಲ. ವಿವಿಧ ಉದ್ದೇಶಗಳಿಗೆ ಯೂನಿಟ್‌ಗಳ ಸಂಯೋಜನೆ ಸಾಮಾನ್ಯವಾಗಿ ಅತ್ಯಂತ ಪರಿಣಾಮಕಾರಿ:

ಟೈಪೋಗ್ರಫಿ ಮತ್ತು ಖಚಿತ ಸ್ಥಳಕ್ಕಾಗಿ REM ಯೂನಿಟ್‌ಗಳು
ಘಟಕ-ನಿಖರ ವಿಸ್ತಾರಕ್ಕಾಗಿ EM ಯೂನಿಟ್‌ಗಳು
ವಿನ್ಯಾಸಗಳ ಮತ್ತು ಸಣ್ಣ ವಿವರಗಳಿಗಾಗಿ ಪಿಕ್ಸೆಲ್‌ಗಳು
ವೀಕ್ಷಣಾ ಯೂನಿಟ್‌ಗಳು ನಿಜವಾದ ಪ್ರತಿಸ್ಪಂದನಶೀಲ ಅಂಶಗಳಿಗೆ
CSS calc() ಕಾರ್ಯವನ್ನು ವಿಭಜಿತ ಯೂನಿಟ್‌ಗಳ ಪ್ರಕಾರಗಳನ್ನು ಸಂಯೋಜಿಸಲು

ನಿಖರವಾದ ವಿಧಾನವು ಪ್ರತಿಯೊಬ್ಬ ಯೂನಿಟ್‌ಗಳನ್ನು ತನ್ನ ಉತ್ತಮವಾದದೇನಾದರೂ ಬಳಸುವುದು.

ಬ್ರೌಸರ್‌ಗಳು 16px ಫಾಂಟ್ ಗಾತ್ರವನ್ನು ಡಿಫಾಲ್ಟ್‌ನಂತೆ ಹೇಗೆ ನಿರ್ವಹಿಸುತ್ತವೆ?

16px ಡಿಫಾಲ್ಟ್ ಅನ್ನು ಓದುಗರಿಗೆ ಉತ್ತಮವಾದ ಓದುಗೋಚಿ ಪ್ರಮಾಣವನ್ನು ಒದಗಿಸಲು ಸ್ಥಾಪಿಸಲಾಯಿತು, ಇದು ಸಾಮಾನ್ಯವಾಗಿ ಸಾಧನಗಳಲ್ಲಿ ಉತ್ತಮವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. ಈ ಡಿಫಾಲ್ಟ್ ಪ್ರವೇಶಾತಿಗೆ ಉತ್ತಮ ನೆಲೆ ಒದಗಿಸುತ್ತದೆ, ಇದು ಪಠ್ಯವು ಬಹುತೇಕ ಬಳಕೆದಾರರಿಗೆ ಹೆಚ್ಚು ಸಣ್ಣವಾಗದಂತೆ ಖಚಿತಪಡಿಸುತ್ತದೆ.

ಈ ಯೂನಿಟ್‌ಗಳನ್ನು ಬಳಸಿಕೊಂಡು ನೆಗೆಟಿವ್ ಮೌಲ್ಯಗಳನ್ನು ಬಳಸಬಹುದೇ?

ಹೌದು, CSS ನೆಗೆಟಿವ್ ಮೌಲ್ಯಗಳನ್ನು ಬಳಸುವ ಮೂಲಕ ಯಾವುದೇ ಯೂನಿಟ್ ಪ್ರಕಾರವನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆ. ನೆಗೆಟಿವ್ ಮಾರ್ಜಿನ್‌ಗಳು, ಪರಿವರ್ತನೆಗಳು, ಮತ್ತು ಸ್ಥಾನಗಳು ಸಾಮಾನ್ಯ ಬಳಕೆದಾರಿಕೆಗಳು. ನಮ್ಮ ಪರಿವರ್ತಕ ಎಲ್ಲಾ ಯೂನಿಟ್‌ಗಳಿಗೆ ನೆಗೆಟಿವ್ ಮೌಲ್ಯಗಳನ್ನು ಸರಿಯಾಗಿಯೇ ನಿರ್ವಹಿಸುತ್ತದೆ.

ನೆಗೆಟಿವ್ ಅಂಶಗಳೊಂದಿಗೆ EM ಯೂನಿಟ್‌ಗಳು ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ?

EM ಯೂನಿಟ್‌ಗಳು ನೆಟ್ಟಗೆ ಇರುವಾಗ ಸಂಕೀರ್ಣವಾಗುತ್ತವೆ. ಉದಾಹರಣೆಗೆ:

1.parent {
2  font-size: 16px;
3}
4.child {
5  font-size: 1.5em; /* 24px (16px × 1.5) */
6}
7.grandchild {
8  font-size: 1.5em; /* 36px (24px × 1.5) */
9}
10

ಈ ಸಂಕೀರ್ಣ ಪರಿಣಾಮವು ಪ್ರಮಾಣಿತ ವಿನ್ಯಾಸಗಳನ್ನು ರಚಿಸಲು ಉಪಯುಕ್ತವಾಗಬಹುದು ಆದರೆ ನಿರೀಕ್ಷಿತ ವಿಸ್ತಾರವನ್ನು ತಪ್ಪಿಸಲು ಜಾಗರೂಕತೆ ಅಗತ್ಯವಿದೆ.

ಹೈ-ಡಿಪಿಐ (ರಟಿನಾ) ಪ್ರದರ್ಶನಗಳನ್ನು CSS ಯೂನಿಟ್‌ಗಳೊಂದಿಗೆ ಹೇಗೆ ನಿರ್ವಹಿಸುತ್ತಾರೆ?

ಹೈ-ಡಿಪಿಐ ಪ್ರದರ್ಶನಗಳು ಸಂಬಂಧಿತ ಯೂನಿಟ್‌ಗಳನ್ನು ಬಳಸಿದಾಗ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ನಿರ್ವಹಿಸುತ್ತವೆ. ಈ ಯೂನಿಟ್‌ಗಳು ಫಾಂಟ್ ಗಾತ್ರವನ್ನು ಆಧರಿತವಾಗಿರುವುದರಿಂದ, ಇವು ಉನ್ನತ-ನಿಖರ ಪರದೆಗಳಲ್ಲಿ ಸೂಕ್ತವಾಗಿ ವಿಸ್ತಾರಗೊಳ್ಳುತ್ತವೆ. ಚಿತ್ರಗಳು ಮತ್ತು ಗಡಿಗಳಿಗೆ, ಸಾಧನ-ಪಿಕ್ಸೆಲ್-ನಿಷ್ಕರ್ಷಣೆ ಅಥವಾ ನಿರ್ವಹಣೆ ಶ್ರೇಣಿಯೊಂದಿಗೆ ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಗಳನ್ನು ಪರಿಗಣಿಸಲು ಯೋಚಿಸಬಹುದು.

ಮೀಡಿಯಾ ಪ್ರಶ್ನೆಗಳಲ್ಲಿ REM ಅಥವಾ EM ಅನ್ನು ಬಳಸಬೇಕೆ?

ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ REM ಮತ್ತು EM ಯೂನಿಟ್‌ಗಳಿಗೆ ಮೀಡಿಯಾ ಪ್ರಶ್ನೆಗಳಲ್ಲಿ ಬೆಂಬಲವು ಸುಧಾರಿತವಾಗಿದೆ. ಮೀಡಿಯಾ ಪ್ರಶ್ನೆಗಳಲ್ಲಿ EM ಯೂನಿಟ್‌ಗಳನ್ನು ಬಳಸುವುದು ಸಾಮಾನ್ಯವಾಗಿ ಶ್ರೇಷ್ಟವಾಗಿದೆ ಏಕೆಂದರೆ:

ಇವು ಬ್ರೌಸರ್‌ನ ಡಿಫಾಲ್ಟ್ ಫಾಂಟ್ ಗಾತ್ರಕ್ಕೆ ಸಂಬಂಧಿತವಾಗಿವೆ
ಬಳಕೆದಾರರ ಫಾಂಟ್ ಗಾತ್ರದ ಆಯ್ಕೆಗಳನ್ನು ಗೌರವಿಸುತ್ತವೆ
ಬ್ರೌಸರ್‌ಗಳಾದಂತೆ ಸಮಾನಾಂತರ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ಗಳನ್ನು ಒದಗಿಸುತ್ತವೆ

1/* ಮೀಡಿಯಾ ಪ್ರಶ್ನೆಗಳಲ್ಲಿ EM ಯೂನಿಟ್‌ಗಳನ್ನು ಬಳಸುವುದು */
2@media (min-width: 48em) {  /* 768px with 16px base */
3  /* ಟ್ಯಾಬ್ಲೆಟ್ ಶ್ರೇಣಿಗಳು */
4}
5
6@media (min-width: 64em) {  /* 1024px with 16px base */
7  /* ಡೆಸ್ಕ್‌ಟಾಪ್ ಶ್ರೇಣಿಗಳು */
8}
9

ಫಿಗ್ಮಾ ಅಥವಾ ಸ್ಕೆಚ್‌ನಂತಹ ವಿನ್ಯಾಸ ಸಾಧನಗಳಲ್ಲಿ ಯೂನಿಟ್‌ಗಳ ನಡುವಿನ ಪರಿವರ್ತನೆ ಹೇಗೆ ನಿರ್ವಹಿಸುತ್ತೀರಿ?

ಬಹುತೇಕ ವಿನ್ಯಾಸ ಸಾಧನಗಳು ಪ್ರಾಥಮಿಕವಾಗಿ ಪಿಕ್ಸೆಲ್‌ಗಳಲ್ಲಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ. ವಿನ್ಯಾಸಗಳನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸುವಾಗ:

ನಿಮ್ಮ ಯೋಜನೆಯ ರೂಟ್ ಫಾಂಟ್ ಗಾತ್ರವನ್ನು ಗಮನಿಸಿ (ಸಾಮಾನ್ಯವಾಗಿ 16px)
ಪಿಕ್ಸೆಲ್ ಮೌಲ್ಯಗಳನ್ನು ರೂಟ್ ಫಾಂಟ್ ಗಾತ್ರದಿಂದ ಹಂಚಿ REM ಮೌಲ್ಯಗಳನ್ನು ಪಡೆಯಲು
EM ಮೌಲ್ಯಗಳನ್ನು ಪಡೆಯಲು ಪೋಷಕ ಅಂಶದ ಫಾಂಟ್ ಗಾತ್ರದಿಂದ ಹಂಚಿ
ಸಾಮಾನ್ಯ ಮೌಲ್ಯಗಳಿಗೆ ಡಿಸೈನ್ ಟೋಕನ್‌ಗಳು ಅಥವಾ ವ್ಯತ್ಯಾಸಗಳನ್ನು ರಚಿಸಲು ಯೋಚಿಸಿ

ಕೆಲವು ವಿನ್ಯಾಸ ಸಾಧನಗಳು ಈ ಪರಿವರ್ತನಾ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ನೆರವೇರಿಸಲು ಪ್ಲಗಿನ್‌ಗಳನ್ನು ಹೊಂದಿವೆ.

ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಉಪಪಿಕ್ಸೆಲ್ ರೆಂಡರಿಂಗ್ ಅನ್ನು ಸಂಬಂಧಿತ ಯೂನಿಟ್‌ಗಳೊಂದಿಗೆ ಹೇಗೆ ನಿರ್ವಹಿಸುತ್ತವೆ?

ಬ್ರೌಸರ್‌ಗಳು ಉಪಪಿಕ್ಸೆಲ್ ಮೌಲ್ಯಗಳನ್ನು ವಿಭಿನ್ನವಾಗಿ ನಿರ್ವಹಿಸುತ್ತವೆ. ಕೆಲವು ಬ್ರೌಸರ್‌ಗಳು ಹತ್ತಿರದ ಪಿಕ್ಸೆಲ್‌ಗೆ ವೃತ್ತೀಕರಿಸುತ್ತವೆ, ಆದರೆ ಇತರರು ಸುಂದರ ವಿಸ್ತಾರಕ್ಕಾಗಿ ಉಪಪಿಕ್ಸೆಲ್ ರೆಂಡರಿಂಗ್ ಅನ್ನು ಬೆಂಬಲಿಸುತ್ತವೆ. ಈ ಸಣ್ಣ REM/EM ಮೌಲ್ಯಗಳು ಅಥವಾ ಪರಿವರ್ತನೆಗಳನ್ನು ಬಳಸುವಾಗ ಕೆಲವೊಮ್ಮೆ ಸ್ವಲ್ಪ ಅಸಮಾನತೆಗಳನ್ನು ಉಂಟುಮಾಡಬಹುದು. ಹೆಚ್ಚಿನ ಬಳಕೆದಾರಿಕೆಗಳಿಗೆ, ಈ ವ್ಯತ್ಯಾಸಗಳು ಅಸಾಮಾನ್ಯವಾಗಿವೆ.

ವಿಭಿನ್ನ CSS ಯೂನಿಟ್‌ಗಳನ್ನು ಬಳಸುವಾಗ ಕಾರ್ಯಕ್ಷಮತೆಯ ಪರಿಣಾಮವೇನು?

ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಪಿಕ್ಸೆಲ್‌ಗಳು, REM, ಅಥವಾ EM ಯೂನಿಟ್‌ಗಳನ್ನು ಬಳಸುವ ನಡುವಿನ ಕಾರ್ಯಕ್ಷಮತೆಯಲ್ಲಿ ಯಾವುದೇ ಪ್ರಮುಖ ವ್ಯತ್ಯಾಸವಿಲ್ಲ. ಯೂನಿಟ್‌ಗಳ ಆಯ್ಕೆ ವಿನ್ಯಾಸದ ಅಗತ್ಯಗಳು, ಪ್ರತಿಸ್ಪಂದನಶೀಲ ವರ್ತನೆ, ಮತ್ತು ಪ್ರವೇಶಾತಿ ಅಗತ್ಯಗಳನ್ನು ಆಧರಿಸಬೇಕು, ಕಾರ್ಯಕ್ಷಮತೆಯ ಪರಿಗಣನೆಗಳ ಬದಲಿಗೆ.

ಉಲ್ಲೇಖಗಳು ಮತ್ತು ಮುಂದಿನ ಓದು

"CSS Values and Units Module Level 3." W3C Recommendation. https://www.w3.org/TR/css-values-3/
Marcotte, Ethan. "Responsive Web Design." A List Apart, May 25, 2010. https://alistapart.com/article/responsive-web-design/
Rutter, Richard. "The Elements of Typographic Style Applied to the Web." http://webtypography.net/
"CSS Units." MDN Web Docs. https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units
"CSS Pixels vs. Physical Pixels." Stack Overflow Documentation. https://stackoverflow.com/questions/8785643/what-exactly-is-the-difference-between-css-pixels-and-device-pixels
Coyier, Chris. "The Lengths of CSS." CSS-Tricks. https://css-tricks.com/the-lengths-of-css/
"Using CSS custom properties (variables)." MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
"Understanding and Using rem Units in CSS." SitePoint. https://www.sitepoint.com/understanding-and-using-rem-units-in-css/

ಇಂದು ನಮ್ಮ ಯೂನಿಟ್ ಪರಿವರ್ತಕವನ್ನು ಪ್ರಯತ್ನಿಸಿ

ಮ್ಯಾನುಯಲ್ CSS ಯೂನಿಟ್ ಪರಿವರ್ತನೆಗೆ ಹೋರಾಡುವುದು ನಿಲ್ಲಿಸಿ ಮತ್ತು ನಮ್ಮ PX, REM, ಮತ್ತು EM ಯೂನಿಟ್ ಪರಿವರ್ತಕವು ನಿಮಗಾಗಿ ಕೆಲಸ ಮಾಡಲಿ. ನೀವು ಪ್ರತಿಸ್ಪಂದನಶೀಲ ವೆಬ್‌ಸೈಟ್ ಅನ್ನು ನಿರ್ಮಿಸುತ್ತಿರುವಾಗ, ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಯನ್ನು ರಚಿಸುತ್ತಿರುವಾಗ, ಅಥವಾ CSS ಯೂನಿಟ್‌ಗಳ ಬಗ್ಗೆ ಕಲಿಯುತ್ತಿರುವಾಗ, ಈ ಸಾಧನವು ನಿಮಗೆ ಸಮಯವನ್ನು ಉಳಿಸುತ್ತದೆ ಮತ್ತು ಖಚಿತತೆಯನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ. ನಿಮ್ಮ ಮೌಲ್ಯಗಳನ್ನು ಈಗ ನಮೂದಿಸಿ, ಯೂನಿಟ್ ಪರಿವರ್ತನೆ ಎಷ್ಟು ಸುಲಭವಾಗಬಹುದು ಎಂದು ನೋಡಿ!

PX ರಿಂದ REM ಗೆ EM ಪರಿವರ್ತಕ: CSS ಘಟಕಗಳ ಗಣಕ

ಪಿಕ್ಸೆಲ್ (PX), ರೂಟ್ ಇಮ್ (REM), ಮತ್ತು ಇಮ್ (EM) ಯೂನಿಟ್ ಪರಿವರ್ತಕ

ಪರಿವರ್ತನ ಸೂತ್ರಗಳು

ದಸ್ತಾವೇಜನೆಯು