PX முதல் REM மற்றும் EM மாறுபடுத்தி: CSS அளவீட்டுக்கணக்கீடு

இந்த எளிய கணக்கீட்டுடன் பிக்சல்கள் (PX), ரூட் எம் (REM) மற்றும் எம் (EM) CSS அளவீடுகளுக்கு இடையே மாறுங்கள். பதிலளிக்கும் வலை வடிவமைப்பு மற்றும் அபிவிருத்திக்கு மிகவும் முக்கியம்.

PX, REM, மற்றும் EM அலகு மாற்றி

பிக்சல்கள் (PX), ரூட் எம் (REM), மற்றும் எம் (EM) அலகுகளுக்கு இடையே மாற்றவும். மற்ற அலகுகளில் சமமான மதிப்புகளை காண்பதற்காக எந்தவொரு புலத்திலும் மதிப்பை உள்ளிடவும்.

ரூட் எழுத்துரு அளவு

பெற்றோர் உருப்படியின் எழுத்துரு அளவு

பிக்சல்கள் (PX)

ரூட் எம் (REM)

rem

எம்

எதிர்மறை அல்லது பூஜ்ய மதிப்புகளுக்கு காண visual கிடையாது

மாற்று சூத்திரங்கள்

PX to REM: px இல் உள்ள மதிப்பு ÷ ரூட் எழுத்துரு அளவு
PX to EM: px இல் உள்ள மதிப்பு ÷ பெற்றோர் எழுத்துரு அளவு
REM to PX: rem இல் உள்ள மதிப்பு × ரூட் எழுத்துரு அளவு
EM to PX: em இல் உள்ள மதிப்பு × பெற்றோர் எழுத்துரு அளவு

📚

ஆவணங்கள்

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 ಯೂನಿಟ್‌ಗಳ ಪರಿಚಯವನ್ನು ಕಂಡಿತು, ಆದರೆ ನಿರ್ವಹಣೆಯ ಸಂಕೀರ್ಣತೆಯ ಕಾರಣದಿಂದಾಗಿ ಅವುಗಳ ಸ್ವೀಕೃತಿಯು ನಿರ περιορισμένο.

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

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

ಪ್ರತಿಕ್ರಿಯಾತ್ಮಕ ವೆಬ್ ವಿನ್ಯಾಸ ಯುಗ (2010-2015)

2010 ರಲ್ಲಿ ಎಥನ್ ಮಾರ್ಕೊಟ್ನ ಪ್ರಭಾವಶಾಲಿ ಲೇಖನವು ಪ್ರತಿಕ್ರಿಯಾತ್ಮಕ ವೆಬ್ ವಿನ್ಯಾಸದ ಬಗ್ಗೆ ಡೆವೆಲಪರ್‌ಗಳ ದೃಷ್ಟಿಕೋನವನ್ನು ಬದಲಾಯಿಸುತ್ತದೆ. REM ಯೂನಿಟ್ CSS3 ರಲ್ಲಿ ಪರಿಚಯಿಸಲಾಯಿತು, cascading ಸಂಕೀರ್ಣತೆಯಿಲ್ಲದೆ ಸಂಬಂಧಿತ ವಿಸ್ತಾರವನ್ನು ಒದಗಿಸುವ ಪ್ರಯೋಜನವನ್ನು ನೀಡುತ್ತದೆ. ಈ ಸಮಯದಲ್ಲಿ 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 ಯೂನಿಟ್‌ಗಳು
ವಿನ್ಯಾಸ ಅಗಲಗಳಿಗೆ ಶೇಕಡಾವಾರು ಅಥವಾ ವೀಕ್ಷಣಾ ಯೂನಿಟ್‌ಗಳು
ಗಡಿಗಳಿಗೆ ಮತ್ತು ಸಣ್ಣ ವಿವರಗಳಿಗೆ ಪಿಕ್ಸೆಲ್‌ಗಳು

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

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

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

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

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

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

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 ಯೂನಿಟ್‌ಗಳ ಬಗ್ಗೆ ಕಲಿಯುತ್ತಿದ್ದೀರಾ, ಈ ಸಾಧನವು ನಿಮಗೆ ಸಮಯವನ್ನು ಉಳಿಸುತ್ತದೆ ಮತ್ತು ನಿಖರತೆಯನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ. ನಿಮ್ಮ ಮೌಲ್ಯಗಳನ್ನು ಈಗ ನಮೂದಿಸಿ, ಯೂನಿಟ್ ಪರಿವರ್ತನೆ ಎಷ್ಟು ಸುಲಭವಾಗಬಹುದು ಎಂಬುದನ್ನು ನೋಡಿ!

💬

பின்னூட்டம்

💬

இந்த கருவி பற்றி பின்னூட்டம் அளிக்க தொடங்க பின்னூட்டத்தை கிளிக் செய்யவும்

🔗

சம்பந்தப்பட்ட கருவிகள்

உங்கள் வேலைப்பாட்டுக்கு பயனுள்ளதாக இருக்கக்கூடிய மேலும் கருவிகளை கண்டறியவும்

கால அலகு மாற்றி: ஆண்டுகள், நாட்கள், மணித்தியாலங்கள், நொடிகள்

இந்த கருவியை முயற்சிக்கவும்

இருபது-பதினேழு மாற்றி: எண்கள் முறைமைகளுக்கு இடையில் மாற்றவும்

இந்த கருவியை முயற்சிக்கவும்

காலணி அளவு மாறுபடுத்தி: அமெரிக்கா, ஐக்கிய ராஜ்யம், ஐரோப்பா & ஜப்பான் அளவீட்டு முறை

இந்த கருவியை முயற்சிக்கவும்

எண் அடிப்படைக் மாற்றி: பைனரி, தசம, ஹெக்சா மற்றும் தனிப்பயன் அடிப்படைகள்

இந்த கருவியை முயற்சிக்கவும்

உலகளாவிய காலணியின் அளவுகளை மாற்றுபவர்: அமெரிக்கா, ஐக்கிய இராச்சியம், ஐரோப்பா மற்றும் மேலும்

இந்த கருவியை முயற்சிக்கவும்