PX నుండి REM మరియు EMకి మార్పిడి: CSS యూనిట్ల గణనాకారుడు

ఈ సరళమైన గణనాకారంతో పిక్సెల్స్ (PX), రూట్ ఎమ్ (REM) మరియు ఎమ్ (EM) CSS యూనిట్ల మధ్య మార్పిడి చేయండి. ప్రతిస్పందనాత్మక వెబ్ డిజైన్ మరియు అభివృద్ధికి అవసరం.

PX, REM, మరియు EM యూనిట్ కన్వర్టర్

పిక్సెల్స్ (PX), రూట్ em (REM), మరియు em (EM) యూనిట్ల మధ్య మార్చండి. ఇతర యూనిట్లలో సమానమైన విలువలను చూడటానికి ఏదైనా ఫీల్డ్‌లో విలువను నమోదు చేయండి.

రూట్ ఫాంట్ పరిమాణం

తల్లి అంశం ఫాంట్ పరిమాణం

పిక్సెల్స్ (PX)

రూట్ EM (REM)

rem

నెగటివ్ లేదా జీరో విలువల కోసం దృశ్యీకరణ అందుబాటులో లేదు

మార్పిడి ఫార్ములాలు

PX నుండి REM: px లో విలువ ÷ రూట్ ఫాంట్ పరిమాణం
PX నుండి EM: px లో విలువ ÷ తల్లి ఫాంట్ పరిమాణం
REM నుండి PX: rem లో విలువ × రూట్ ఫాంట్ పరిమాణం
EM నుండి 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 ಪರಿವರ್ತನೆಗಳಿಗೆ, ನೀವು ಕೆಲಸ ಮಾಡುತ್ತಿರುವ ಪೋಷಕ ಅಂಶದ ಅಕ್ಷರ ಗಾತ್ರವನ್ನು ಹೊಂದಿಸಿ
ಬಳಕೆದಾರರ ಡೀಫಾಲ್ಟ್ ಅಕ್ಷರ ಗಾತ್ರದ ಸೆಟಿಂಗ್‌ಗಳನ್ನು ಗೌರವಿಸುವುದನ್ನು ನೆನೆಸಿಕೊಳ್ಳಿ

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 ರಲ್ಲಿ ಎಥನ್ ಮಾರ್ಕೊಟ್ನ ಪ್ರತಿಸ್ಪಂದನಶೀಲ ವೆಬ್ ವಿನ್ಯಾಸದ ಕುರಿತು ಪ್ರಭಾವಶಾಲಿ ಲೇಖನವು ಡೆವಲಪರ್‌ಗಳನ್ನು CSS ಯೂನಿಟ್‌ಗಳನ್ನು ಬಳಸುವ ವಿಧಾನವನ್ನು ಬದಲಾಯಿಸುತ್ತದೆ. 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 ಯೂನಿಟ್‌ಗಳನ್ನು ಬಳಸುವುದು ಹೇಗೆ?

ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ EM ಮತ್ತು REM ಯೂನಿಟ್‌ಗಳಿಗೆ ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳಲ್ಲಿನ ಬೆಂಬಲವು ಉತ್ತಮವಾಗಿದೆ. ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳಲ್ಲಿ 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 ಮೌಲ್ಯಗಳಿಗಾಗಿ ಪೋಷಕ ಅಂಶದ ಅಕ್ಷರ ಗಾತ್ರದಿಂದ ಭಾಗಿಸಿ
ಸಾಮಾನ್ಯ ಮೌಲ್ಯಗಳಿಗೆ ಡಿಸೈನ್ ಟೋಕನ್‌ಗಳು ಅಥವಾ ವ್ಯತ್ಯಾಸಗಳನ್ನು ನಿರ್ಮಿಸಲು ಪರಿಗಣಿಸಿ

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

ಉನ್ನತ DPI (ರೇಟಿನಾ) ಡಿಸ್ಪ್ಲೇ‌ಗಳನ್ನು CSS ಯೂನಿಟ್‌ಗಳೊಂದಿಗೆ ನಾನು ಹೇಗೆ ನಿರ್ವಹಿಸುತ್ತೇನೆ?

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

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

💬

ప్రతిస్పందన

💬

ఈ సాధనంపై ప్రతిస్పందన ఇవ్వడం ప్రారంభించడానికి ప్రతిస్పందన టోస్ట్‌ను క్లిక్ చేయండి

🔗

సంబంధిత సాధనాలు

మీ పని ప్రవాహానికి ఉపయోగకరమైన మరిన్ని సాధనాలను కనుగొనండి