CSS clamp() ಕ್ಯಾಲ್ಕುಲೇಟರ್
ಸಣ್ಣ ಮತ್ತು ದೊಡ್ಡ ಸ್ಕ್ರೀನ್ಗಳಿಗಾಗಿ ಗಾತ್ರವನ್ನು ನಮೂದಿಸಿ ಮತ್ತು ಅವುಗಳ ನಡುವೆ ಸುಗಮವಾಗಿ ಬದಲಾಗುವ clamp() ಮೌಲ್ಯವನ್ನು ಪಡೆಯಿರಿ — ಫಾಂಟ್ ಗಾತ್ರಗಳು, ಪ್ಯಾಡಿಂಗ್, ಮಾರ್ಜಿನ್ಗಳು ಅಥವಾ ಗ್ಯಾಪ್ಗಳಿಗಾಗಿ.
clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)ಫಲಿತಾಂಶವು ಮಧ್ಯದ ಅವಧಿಯಲ್ಲಿ rem ಭಾಗವನ್ನು ಉಳಿಸಿಕೊಳ್ಳುತ್ತದೆ, ಆದ್ದರಿಂದ ಯಾರಾದರೂ 200% ಗೆ ಜೂಮ್ ಮಾಡಿದಾಗಲೂ ಪಠ್ಯವು ದೊಡ್ಡದಾಗುತ್ತದೆ — ಕೇವಲ ವ್ಯೂಪೋರ್ಟ್ ಮೌಲ್ಯವು ಇದನ್ನು ಮಾಡಲು ಬಿಡುವುದಿಲ್ಲ.
ಹೊಂದಿಕೊಳ್ಳುವ ಪಠ್ಯ, ಸರಿಯಾದ ಗಾತ್ರದಲ್ಲಿ.
ಲೆಕ್ಕಾಚಾರವು ಸಂಪೂರ್ಣವಾಗಿ ನಿಮ್ಮ ಬ್ರೌಸರ್ನಲ್ಲಿ ರನ್ ಆಗುತ್ತದೆ. ನೀವು ಇಲ್ಲಿ ನಮೂದಿಸುವ ಯಾವುದೇ ಮಾಹಿತಿಯನ್ನು BroBroGo ಗೆ ಅಪ್ಲೋಡ್ ಮಾಡಲಾಗುವುದಿಲ್ಲ.
ಪದೇ ಪದೇ ಕೇಳಲಾಗುವ ಪ್ರಶ್ನೆಗಳು
ಕ್ಯಾಲ್ಕುಲೇಟರ್ clamp() ಮೌಲ್ಯವನ್ನು ಹೇಗೆ ನಿರ್ಮಿಸುತ್ತದೆ?
ನೀವು ಇದಕ್ಕೆ ಎರಡು ಪಾಯಿಂಟ್ಗಳನ್ನು ನೀಡುತ್ತೀರಿ: ಸಣ್ಣ ಸ್ಕ್ರೀನ್ ಅಗಲದಲ್ಲಿನ ಗಾತ್ರ ಮತ್ತು ದೊಡ್ಡ ಸ್ಕ್ರೀನ್ ಅಗಲದಲ್ಲಿನ ಗಾತ್ರ. ಇದು ಅವುಗಳ ನಡುವೆ ನೇರ ರೇಖೆಯನ್ನು ಎಳೆಯುತ್ತದೆ ಇದರಿಂದ ಸ್ಕ್ರೀನ್ ವಿಸ್ತಾರವಾದಂತೆ ಗಾತ್ರವು ಸುಗಮವಾಗಿ ಬೆಳೆಯುತ್ತದೆ, ನಂತರ ಅದನ್ನು clamp() ನಲ್ಲಿ ಸುತ್ತುತ್ತದೆ ಇದರಿಂದ ಅದು ನಿಮ್ಮ ಸಣ್ಣ-ಸ್ಕ್ರೀನ್ ಗಾತ್ರಕ್ಕಿಂತ ಕಡಿಮೆ ಅಥವಾ ದೊಡ್ಡ-ಸ್ಕ್ರೀನ್ ಗಾತ್ರಕ್ಕಿಂತ ಹೆಚ್ಚು ಹೋಗುವುದಿಲ್ಲ. ಎರಡು ಅಗಲಗಳ ನಡುವೆ ಗಾತ್ರವು ಹೊಂದಿಕೊಳ್ಳುವಂತೆ ಬದಲಾಗುತ್ತದೆ; ಅವುಗಳ ಹೊರಗೆ ಅದು ಹತ್ತಿರದ ಮಿತಿಯಲ್ಲಿ ಸ್ಥಿರವಾಗಿರುತ್ತದೆ.
ಫಲಿತಾಂಶವು ಪಿಕ್ಸೆಲ್ಗಳ ಬದಲಿಗೆ rem ಮತ್ತು vw ನಲ್ಲಿ ಏಕೆ ಇರುತ್ತದೆ?
ಮಿತಿಗಳು rem ನಲ್ಲಿರುತ್ತವೆ ಮತ್ತು ಬದಲಾಗುವ ಮಧ್ಯದ ಭಾಗವು rem ಘಟಕವನ್ನು ಹೊಂದಿರುತ್ತದೆ, ಆದ್ದರಿಂದ ಓದುಗರು ಜೂಮ್ ಇನ್ ಮಾಡಿದಾಗ ಅಥವಾ ಅವರ ಬ್ರೌಸರ್ನ ಡೀಫಾಲ್ಟ್ ಫಾಂಟ್ ಗಾತ್ರವನ್ನು ಹೆಚ್ಚಿಸಿದಾಗಲೂ ಪಠ್ಯವು ಬೆಳೆಯುತ್ತದೆ — ಕೇವಲ ಪಿಕ್ಸೆಲ್ ಅಥವಾ ವ್ಯೂಪೋರ್ಟ್ ಮೌಲ್ಯವು ಇದನ್ನು ತಡೆಯಬಹುದು. ಹೆಚ್ಚಿನ ಜನರು ಪಿಕ್ಸೆಲ್ಗಳಲ್ಲಿ ಯೋಚಿಸುವುದರಿಂದ ನೀವು ಪಿಕ್ಸೆಲ್ಗಳಲ್ಲಿ ಗಾತ್ರಗಳನ್ನು ಟೈಪ್ ಮಾಡುತ್ತೀರಿ, ಮತ್ತು ಈ ಉಪಕರಣವು ನಿಮ್ಮ ರೂಟ್ ಫಾಂಟ್ ಗಾತ್ರವನ್ನು ಬಳಸಿಕೊಂಡು ಅದನ್ನು rem ಗೆ ಪರಿವರ್ತಿಸುತ್ತದೆ.
ಫಾಂಟ್ ಗಾತ್ರಕ್ಕೆ ಮಾತ್ರವಲ್ಲದೆ ಸ್ಪೇಸಿಂಗ್ಗಾಗಿಯೂ ನಾನು ಇದನ್ನು ಬಳಸಬಹುದೇ?
ಹೌದು. ಇದೇ ಮೌಲ್ಯವು padding, margin, gap, width ಅಥವಾ height — ಹೀಗೆ ಉದ್ದದ ಅಳತೆ ಇರುವ ಯಾವುದೇ ಸ್ಥಳದಲ್ಲಿ ಕೆಲಸ ಮಾಡುತ್ತದೆ. ಪಠ್ಯದ ಬದಲಿಗೆ ಸ್ಪೇಸಿಂಗ್ ಬೆಳೆಯುವುದನ್ನು ನೋಡಲು ಪ್ರಿವ್ಯೂ ಅನ್ನು 'Box' ಗೆ ಬದಲಾಯಿಸಿ. ನಿಮ್ಮ ಸಣ್ಣ ಮತ್ತು ದೊಡ್ಡ ಗಾತ್ರಗಳು ಒಂದೇ ಆಗಿದ್ದರೆ, ಫಲಿತಾಂಶವು ಸಾಮಾನ್ಯ ಸ್ಥಿರ ಉದ್ದಕ್ಕೆ ಕುಗ್ಗುತ್ತದೆ, ಏಕೆಂದರೆ ಅಲ್ಲಿ ಬದಲಾಯಿಸಲು ಏನೂ ಇರುವುದಿಲ್ಲ.
ಎಲ್ಲಾ ಬ್ರೌಸರ್ಗಳು clamp() ಅನ್ನು ಬೆಂಬಲಿಸುತ್ತವೆಯೇ?
ಹೌದು — 2020 ರಿಂದ ಎಲ್ಲಾ ಪ್ರಸ್ತುತ ಬ್ರೌಸರ್ಗಳು clamp() ಅನ್ನು ಬೆಂಬಲಿಸುತ್ತವೆ, ಆದ್ದರಿಂದ ನೀವು ಯಾವುದೇ ಫಾಲ್ಬ್ಯಾಕ್ ಇಲ್ಲದೆ ಮೌಲ್ಯವನ್ನು ನೇರವಾಗಿ ಬಳಸಬಹುದು. ಅತ್ಯಂತ ದೊಡ್ಡ ಗರಿಷ್ಠ ಮಿತಿ ಅಥವಾ ವೇಗದ ಬದಲಾವಣೆಯ ದರದಲ್ಲಿ, ಅಗತ್ಯವಿರುವ ಓದುಗರಿಗಾಗಿ ಪಠ್ಯವು ಇನ್ನೂ ದೊಡ್ಡದಾಗುತ್ತದೆಯೇ ಎಂದು 200% ಜೂಮ್ನಲ್ಲಿ ಒಮ್ಮೆ ಪರಿಶೀಲಿಸುವುದು ಒಳ್ಳೆಯದು.