px ನಿಂದ rem ಮತ್ತು em ಕನ್ವರ್ಟರ್

ಟೂಲ್ ಏನು ಮಾಡುತ್ತದೆ

ಈ ಟೂಲ್ ಪಿಕ್ಸೆಲ್ (px) ಮೌಲ್ಯಗಳನ್ನು ರೂಟ್ em (rem) ಮತ್ತು em ಮೌಲ್ಯಗಳಿಗೆ ಪರಿವರ್ತಿಸುತ್ತದೆ, ಮತ್ತು ಪ್ರತಿಯಾಗಿಯೂ ಸಹ. ಮೂರು ಯೂನಿಟ್‌ಗಳಲ್ಲಿ ಯಾವುದಾದರೂ ಒಂದರಲ್ಲಿ ಮೌಲ್ಯವನ್ನು ನಮೂದಿಸಬಹುದು, ಮತ್ತು ಟೂಲ್ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಉಳಿದ ಎರಡು ಯೂನಿಟ್‌ಗಳಲ್ಲಿ ಸಮಾನ ಮೌಲ್ಯಗಳನ್ನು ಲೆಕ್ಕ ಹಾಕಿ ತೋರಿಸುತ್ತದೆ. ನಿಮ್ಮ ವಿನ್ಯಾಸಕ್ಕೆ ಸೂಕ್ತವಾದ ನಿಖರ ಪರಿವರ್ತನೆಗಳಿಗಾಗಿ ಒಂದು ಕಸ್ಟಮ್ ರೂಟ್ ಫಾಂಟ್ ಗಾತ್ರ ಮತ್ತು ಒಂದು em ಕಾಂಟೆಕ್ಸ್ಟ್ ಫಾಂಟ್ ಗಾತ್ರವನ್ನೂ ಸಹ ಹೊಂದಿಸಬಹುದು. px, rem ಅಥವಾ em ಫೀಲ್ಡ್‌ಗಳಲ್ಲಿ ಯಾವುದನ್ನೇ ಎಡಿಟ್ ಮಾಡಿದರೂ, ಉಳಿದ ಎರಡು ನೀವು ಟೈಪ್ ಮಾಡಿದಂತೆ ಅಪ್‌ಡೇಟ್ ಆಗುತ್ತವೆ. "ಮೌಲ್ಯಗಳು" ಫೀಲ್ಡ್‌ನ ಬಳಿ "px, rem ಅಥವಾ em ಮೌಲ್ಯವನ್ನು ನಮೂದಿಸಿ — ನೀವು ಟೈಪ್ ಮಾಡಿದಂತೆ ಉಳಿದ ಎರಡು ಅಪ್‌ಡೇಟ್ ಆಗುತ್ತವೆ." ಎಂಬ ಸುಳಿವು ಇದನ್ನೇ ನೆನಪಿಸುತ್ತದೆ, ಮತ್ತು ಫಲಿತಾಂಶದ ಬಳಿ "ಎಲ್ಲಾ ಮೂರು ಯೂನಿಟ್‌ಗಳಲ್ಲಿ ಪರಿವರ್ತಿಸಲಾಗಿದೆ." ಎಂಬ ಸಾಲು ಕಾಣಿಸುತ್ತದೆ.

ಪುಟದಲ್ಲಿ ಒಟ್ಟು ನಾಲ್ಕು ಔಟ್‌ಪುಟ್‌ಗಳು ಕಾಣಿಸುತ್ತವೆ: ನೀವು ಹೊಂದಿಸಿದ ರೂಟ್ ಫಾಂಟ್ ಗಾತ್ರ, ನೀವು ಹೊಂದಿಸಿದ em ಕಾಂಟೆಕ್ಸ್ಟ್ ಫಾಂಟ್ ಗಾತ್ರ, ಎಲ್ಲಾ ಮೂರು ಯೂನಿಟ್‌ಗಳಲ್ಲಿ ಪರಿವರ್ತಿತ ಮೌಲ್ಯಗಳು, ಮತ್ತು "ಸಾಮಾನ್ಯ px → rem (16px ಬೇಸ್)" ಕೋಷ್ಟಕ.

ರೂಟ್ ಫಾಂಟ್ ಗಾತ್ರ ಮತ್ತು rem ಮೌಲ್ಯಗಳು

"ರೂಟ್ ಫಾಂಟ್ ಗಾತ್ರ (px)" ಫೀಲ್ಡ್ ಪುಟದ ಬೇಸ್ ಫಾಂಟ್ ಗಾತ್ರವನ್ನು ಪಿಕ್ಸೆಲ್‌ಗಳಲ್ಲಿ ಪ್ರತಿನಿಧಿಸುತ್ತದೆ, ಮತ್ತು ಇದರ ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯ 16px ಆಗಿದೆ. rem ಮೌಲ್ಯಗಳನ್ನು ಈ ರೂಟ್ ಫಾಂಟ್ ಗಾತ್ರಕ್ಕೆ ಅನುಗುಣವಾಗಿ ಲೆಕ್ಕ ಹಾಕಲಾಗುತ್ತದೆ. ರೂಟ್ ಫಾಂಟ್ ಗಾತ್ರವು 0 ಕ್ಕಿಂತ ಹೆಚ್ಚಿನ ಸಂಖ್ಯೆಯಾಗಿರಬೇಕು; ಅದಕ್ಕಿಂತ ಕಡಿಮೆ ಅಥವಾ ಅಮಾನ್ಯ ಮೌಲ್ಯ ನಮೂದಿಸಿದರೆ "ರೂಟ್ ಫಾಂಟ್ ಗಾತ್ರವು 0 ಕ್ಕಿಂತ ಹೆಚ್ಚಿನ ಸಂಖ್ಯೆಯಾಗಿರಬೇಕು." ಎಂಬ ಸಂದೇಶ ಕಾಣಿಸುತ್ತದೆ. ನಿಮ್ಮ ಸೈಟ್ ಬೇರೆ ರೂಟ್ ಫಾಂಟ್ ಗಾತ್ರ ಬಳಸಿದರೆ, ಈ ಫೀಲ್ಡ್ ಅನ್ನು ಬದಲಾಯಿಸಿ — ಪ್ರತಿ rem ಮೌಲ್ಯವೂ ತಕ್ಷಣ ಅಪ್‌ಡೇಟ್ ಆಗುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, ರೂಟ್ ಫಾಂಟ್ ಗಾತ್ರ 16px ಇರುವಾಗ "ಮೌಲ್ಯಗಳು" ಫೀಲ್ಡ್‌ನಲ್ಲಿ 24 ಎಂದು ನಮೂದಿಸಿದರೆ ಟೂಲ್ 1.5rem ತೋರಿಸುತ್ತದೆ; ರೂಟ್ ಫಾಂಟ್ ಗಾತ್ರವನ್ನು 20px ಗೆ ಬದಲಾಯಿಸಿದ ಕೂಡಲೇ ಅದೇ 24px ಈಗ 1.2rem ಎಂದು ಮರುಲೆಕ್ಕಾಚಾರವಾಗುತ್ತದೆ. ಟೂಲ್ ಈ ಫೀಲ್ಡ್‌ನಲ್ಲಿ ನೀವು ಹೊಂದಿಸಿದ ಮೌಲ್ಯವನ್ನೇ ಔಟ್‌ಪುಟ್ ಆಗಿಯೂ ತೋರಿಸುತ್ತದೆ. ಇದರ ಜೊತೆಗೆ ಪುಟದಲ್ಲಿ "ಸಾಮಾನ್ಯ px → rem (16px ಬೇಸ್)" ಎಂಬ ಒಂದು ಕೋಷ್ಟಕವಿದೆ, ಇದು 16px ರೂಟ್ ಫಾಂಟ್ ಗಾತ್ರವನ್ನು ಊಹಿಸಿಕೊಂಡು ಸಾಮಾನ್ಯ ಪಿಕ್ಸೆಲ್ ಮೌಲ್ಯಗಳನ್ನು rem ಗೆ ಪರಿವರ್ತಿಸಿ ತೋರಿಸುತ್ತದೆ — ಉದಾಹರಣೆಗೆ 32px ಎಂದರೆ 2rem ಮತ್ತು 8px ಎಂದರೆ 0.5rem ಎಂದು ಈ ಕೋಷ್ಟಕದಲ್ಲಿ ಕಾಣಬಹುದು. ಈ ಕೋಷ್ಟಕ ಯಾವಾಗಲೂ 16px ಬೇಸ್ ಆಧಾರದ ಮೇಲೆಯೇ ಇರುತ್ತದೆ, ನೀವು ರೂಟ್ ಫಾಂಟ್ ಗಾತ್ರ ಫೀಲ್ಡ್‌ನಲ್ಲಿ ಬೇರೆ ಮೌಲ್ಯ ಹೊಂದಿಸಿದ್ದರೂ ಸಹ.

em ಕಾಂಟೆಕ್ಸ್ಟ್ ಫಾಂಟ್ ಗಾತ್ರ

em ಮೌಲ್ಯವು ಪುಟದ ರೂಟ್‌ಗೆ ಅಲ್ಲ, ಬದಲಿಗೆ ಅದು ಇರುವ ಎಲಿಮೆಂಟ್‌ನ ಸ್ವಂತ ಫಾಂಟ್ ಗಾತ್ರಕ್ಕೆ ಸಂಬಂಧಿಸಿರುತ್ತದೆ. ಅದಕ್ಕಾಗಿಯೇ ಟೂಲ್‌ನಲ್ಲಿ "em ಕಾಂಟೆಕ್ಸ್ಟ್ ಫಾಂಟ್ ಗಾತ್ರ (px)" ಎಂಬ ಪ್ರತ್ಯೇಕ ಫೀಲ್ಡ್ ಇದೆ — ಇದು em ಪರಿವರ್ತನೆಗಳಿಗಾಗಿ ಎಲಿಮೆಂಟ್‌ನ ಫಾಂಟ್ ಗಾತ್ರವನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ, ಮತ್ತು ಟೂಲ್ ಈ ಮೌಲ್ಯವನ್ನೂ ಔಟ್‌ಪುಟ್ ಆಗಿ ತೋರಿಸುತ್ತದೆ. ಇದರ ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯ ಕೂಡ 16px. ಈ ಫೀಲ್ಡ್ ಕೂಡ 0 ಕ್ಕಿಂತ ಹೆಚ್ಚಿನ ಸಂಖ್ಯೆಯಾಗಿರಬೇಕು; ಇಲ್ಲದಿದ್ದರೆ "em ಕಾಂಟೆಕ್ಸ್ಟ್ ಫಾಂಟ್ ಗಾತ್ರವು 0 ಕ್ಕಿಂತ ಹೆಚ್ಚಿನ ಸಂಖ್ಯೆಯಾಗಿರಬೇಕು." ಎಂಬ ಸಂದೇಶ ಕಾಣಿಸುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, em ಕಾಂಟೆಕ್ಸ್ಟ್ ಫಾಂಟ್ ಗಾತ್ರವನ್ನು 20px ಗೆ ಬದಲಾಯಿಸಿ "ಮೌಲ್ಯಗಳು" ಫೀಲ್ಡ್‌ನಲ್ಲಿ 30 ಎಂದು ನಮೂದಿಸಿದರೆ, ಟೂಲ್ 1.5em ತೋರಿಸುತ್ತದೆ — ಈ ಲೆಕ್ಕಾಚಾರ ರೂಟ್ ಫಾಂಟ್ ಗಾತ್ರ ಬದಲಾಗದೆಯೇ, ಪ್ರತ್ಯೇಕವಾಗಿ ನಡೆಯುತ್ತದೆ.

ಮೌಲ್ಯಗಳನ್ನು ನಮೂದಿಸಿ ಪರಿವರ್ತಿಸುವುದು

"ಮೌಲ್ಯಗಳು" ಫೀಲ್ಡ್‌ನಲ್ಲಿ px, rem ಅಥವಾ em ನಲ್ಲಿ ಒಂದು ಉದ್ದವನ್ನು ಪ್ರತಿನಿಧಿಸುವ ಸಂಖ್ಯೆಯನ್ನು ನಮೂದಿಸಬಹುದು, ಮತ್ತು ಟೂಲ್ ಎಲ್ಲಾ ಮೂರು ಯೂನಿಟ್‌ಗಳಲ್ಲಿನ ಪರಿವರ್ತಿತ ಮೌಲ್ಯಗಳನ್ನು ಔಟ್‌ಪುಟ್ ಆಗಿ ತೋರಿಸುತ್ತದೆ. ಆರಂಭದಲ್ಲಿ, 16px ಎಂದರೆ 1rem ಎಂದರೆ 1em ಗೆ ಸಮನಾಗಿರುತ್ತದೆ — ಅಂದರೆ ಡೀಫಾಲ್ಟ್ ರೂಟ್ ಮತ್ತು ಕಾಂಟೆಕ್ಸ್ಟ್ ಫಾಂಟ್ ಗಾತ್ರಗಳಲ್ಲಿ, "ಮೌಲ್ಯಗಳು" ಫೀಲ್ಡ್‌ನಲ್ಲಿ 24 ಎಂದು ನಮೂದಿಸಿದರೆ ಟೂಲ್ 1.5rem ಮತ್ತು 1.5em ಅನ್ನು ತೋರಿಸುತ್ತದೆ. ಟೂಲ್ ಋಣಾತ್ಮಕ ಪಿಕ್ಸೆಲ್ ಮೌಲ್ಯಗಳನ್ನೂ ಅನುಮತಿಸುತ್ತದೆ — ಡೀಫಾಲ್ಟ್ ಫಾಂಟ್ ಗಾತ್ರಗಳಲ್ಲಿ -8 ಎಂದು ನಮೂದಿಸಿದರೆ ಟೂಲ್ -0.5rem ಮತ್ತು -0.5em ಅನ್ನು ತೋರಿಸುತ್ತದೆ. "ಮೌಲ್ಯಗಳು" ಫೀಲ್ಡ್‌ನಲ್ಲಿ ಅಮಾನ್ಯ ಮೌಲ್ಯ ನಮೂದಿಸಿದರೆ "ಪರಿವರ್ತಿಸಲು ಸಂಖ್ಯೆಯನ್ನು ನಮೂದಿಸಿ." ಎಂಬ ಸಂದೇಶ ಕಾಣಿಸುತ್ತದೆ.

ಇದು ಯಾರಿಗೆ ಉಪಯುಕ್ತ

ಈ ಟೂಲ್ ಈ ಕೆಳಗಿನವರಿಗೆ ಉಪಯುಕ್ತ:

• ಸ್ಥಿರ ಪಿಕ್ಸೆಲ್ ಮೌಲ್ಯಗಳನ್ನು ರೆಸ್ಪಾನ್ಸಿವ್ ವಿನ್ಯಾಸಕ್ಕಾಗಿ ರಿಲೇಟಿವ್ rem ಅಥವಾ em ಯೂನಿಟ್‌ಗಳಿಗೆ ಪರಿವರ್ತಿಸಬೇಕಾದವರಿಗೆ.
• ಬೇರೆ ಬೇರೆ ರೂಟ್ ಫಾಂಟ್ ಗಾತ್ರಗಳು rem ಮೌಲ್ಯಗಳ ಮೇಲೆ ಹೇಗೆ ಪರಿಣಾಮ ಬೀರುತ್ತವೆ ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಬಯಸುವವರಿಗೆ.
• ಒಂದು ನಿರ್ದಿಷ್ಟ ಎಲಿಮೆಂಟ್‌ನ ಫಾಂಟ್ ಗಾತ್ರದ ಆಧಾರದಲ್ಲಿ em ಮೌಲ್ಯಗಳನ್ನು ಲೆಕ್ಕ ಹಾಕಬೇಕಾದವರಿಗೆ.
• ಓದುಗರು ತಮ್ಮ ಡೀಫಾಲ್ಟ್ ಫಾಂಟ್ ಗಾತ್ರವನ್ನು ಬದಲಾಯಿಸಿದಾಗಲೂ ತಮ್ಮ ಸೈಜಿಂಗ್ ಸರಿಯಾಗಿ ಸ್ಕೇಲ್ ಆಗುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಬಯಸುವವರಿಗೆ.

ಈ ನಾಲ್ಕೂ ಅಗತ್ಯಗಳಿಗೆ ಒಂದೇ ಟೂಲ್‌ನಲ್ಲಿ, ಒಂದೇ ಪುಟದಲ್ಲಿ ಪರಿಹಾರ ಸಿಗುತ್ತದೆ — px, rem, em ಫೀಲ್ಡ್‌ಗಳ ನಡುವೆ ಬದಲಾಗುತ್ತಾ, ರೂಟ್ ಮತ್ತು em ಕಾಂಟೆಕ್ಸ್ಟ್ ಫಾಂಟ್ ಗಾತ್ರಗಳನ್ನು ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್‌ಗೆ ತಕ್ಕಂತೆ ಹೊಂದಿಸಿಕೊಳ್ಳಬಹುದು.

ಗೌಪ್ಯತೆ

ಪ್ರತಿಯೊಂದು ಪರಿವರ್ತನೆಯೂ ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನಲ್ಲೇ ರನ್ ಆಗುತ್ತದೆ. ನೀವು ಟೈಪ್ ಮಾಡುವ ಯಾವುದೇ ಮಾಹಿತಿಯನ್ನು BroBroGo ಗೆ ಅಪ್‌ಲೋಡ್ ಮಾಡಲಾಗುವುದಿಲ್ಲ.

ಪದೇ ಪದೇ ಕೇಳಲಾಗುವ ಪ್ರಶ್ನೆಗಳು

px, rem ಮತ್ತು em ನಡುವಿನ ವ್ಯತ್ಯಾಸವೇನು?

px ಎನ್ನುವುದು ಸ್ಥಿರವಾದ ಉದ್ದವಾಗಿದೆ. rem ಅನ್ನು ಪುಟದ ರೂಟ್ ಫಾಂಟ್ ಗಾತ್ರಕ್ಕೆ ಅನುಗುಣವಾಗಿ ಅಳೆಯಲಾಗುತ್ತದೆ, ಆದ್ದರಿಂದ 16px ರೂಟ್‌ನಲ್ಲಿ, 1rem ಎಂದರೆ 16px ಗೆ ಸಮನಾಗಿರುತ್ತದೆ. em ಅನ್ನು ಅದು ಇರುವ ಎಲಿಮೆಂಟ್‌ನ ಫಾಂಟ್ ಗಾತ್ರಕ್ಕೆ ಅನುಗುಣವಾಗಿ ಅಳೆಯಲಾಗುತ್ತದೆ. rem ನಲ್ಲಿ ಗಾತ್ರ ಮತ್ತು ಸ್ಪೇಸಿಂಗ್ ಅನ್ನು ಹೊಂದಿಸುವುದರಿಂದ ಓದುಗರು ತಮ್ಮ ಡೀಫಾಲ್ಟ್ ಫಾಂಟ್ ಗಾತ್ರವನ್ನು ಬದಲಾಯಿಸಿದಾಗ ಎಲ್ಲವೂ ಹೊಂದಿಕೊಳ್ಳುವಂತೆ ಬದಲಾಗುತ್ತದೆ.

ಪ್ರತ್ಯೇಕ em ಕಾಂಟೆಕ್ಸ್ಟ್ ಗಾತ್ರ ಏಕೆ ಇದೆ?

em ಎನ್ನುವುದು ಅದರದೇ ಆದ ಎಲಿಮೆಂಟ್‌ನ ಫಾಂಟ್ ಗಾತ್ರಕ್ಕೆ ಸಂಬಂಧಿಸಿದೆ, ಇದು ಯಾವಾಗಲೂ ರೂಟ್ ಆಗಿರುವುದಿಲ್ಲ. em ಅನ್ನು ಸರಿಯಾಗಿ ಓದಲು em ಕಾಂಟೆಕ್ಸ್ಟ್ ಅನ್ನು ಆ ಎಲಿಮೆಂಟ್‌ನ ಫಾಂಟ್ ಗಾತ್ರಕ್ಕೆ ಹೊಂದಿಸಿ, ಮತ್ತು ಎರಡೂ ಹೊಂದಿಕೆಯಾದಾಗ ಅದನ್ನು ರೂಟ್‌ಗೆ ಸಮನಾಗಿ ಇರಿಸಿ.

ನನ್ನ ರೂಟ್ ಫಾಂಟ್ ಗಾತ್ರವು 16px ಅಲ್ಲದಿದ್ದರೆ ಏನು ಮಾಡಬೇಕು?

ನಿಮ್ಮ CSS ಗೆ ಹೊಂದಿಕೆಯಾಗುವಂತೆ ರೂಟ್ ಫಾಂಟ್ ಗಾತ್ರದ ಫೀಲ್ಡ್ ಅನ್ನು ಬದಲಾಯಿಸಿ ಮತ್ತು ಪ್ರತಿ rem ಮೌಲ್ಯವು ತಕ್ಷಣವೇ ಅಪ್‌ಡೇಟ್ ಆಗುತ್ತದೆ. ಕೆಳಗಿನ ತ್ವರಿತ ಕೋಷ್ಟಕವು ಹೆಚ್ಚಿನ ಸೈಟ್‌ಗಳು ಬಳಸುವ ಸಾಮಾನ್ಯ 16px ರೂಟ್‌ಗೆ ಉಪಯುಕ್ತ ಮಾರ್ಗದರ್ಶಿಯಾಗಿದೆ.