ಉಚಿತ CSS clamp() ಜನರೇಟರ್

ಇದು ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ

ಈ ಟೂಲ್ ಕೈಯಿಂದ ಬರೆದ ರೇಖೀಯ ಇಂಟರ್ಪೊಲೇಶನ್ ಸೂತ್ರ ಬಳಸಿ CSS clamp() ಮೌಲ್ಯಗಳನ್ನು ಲೆಕ್ಕಹಾಕುತ್ತದೆ — ಯಾವುದೇ ಲೈಬ್ರರಿಗಳಿಲ್ಲ, ಸರ್ವರ್ ರೌಂಡ್-ಟ್ರಿಪ್‌ಗಳಿಲ್ಲ. ನೀವು ಎರಡು ಗಾತ್ರಗಳು ಮತ್ತು ಎರಡು ವ್ಯೂಪೋರ್ಟ್ ಅಗಲಗಳನ್ನು ನಮೂದಿಸುತ್ತೀರಿ; ಗಣಿತ ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ತಕ್ಷಣ ಚಲಿಸಿ ಆ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ಗಳ ನಡುವೆ ನಿಮ್ಮ ಟೈಪ್ ಅಥವಾ ಸ್ಪೇಸಿಂಗ್ ಅನ್ನು ಸುಗಮವಾಗಿ ಪ್ರಮಾಣಿಸುವ vw-ಆಧಾರಿತ ಆದ್ಯತೆಯ ಮೌಲ್ಯದೊಂದಿಗೆ ಸಿದ್ಧ-ಪೇಸ್ಟ್ clamp() ಎಕ್ಸ್‌ಪ್ರೆಶನ್ ಉತ್ಪಾದಿಸುತ್ತದೆ.

1. 1
   ರೇಖೀಯ ಇಳಿಜಾರು ಗಣನೆ

   ಟೂಲ್ ಪಿಕ್ಸೆಲ್-ಪ್ರತಿ-ಪಿಕ್ಸೆಲ್ ಇಳಿಜಾರನ್ನು ಲೆಕ್ಕಹಾಕುತ್ತದೆ: (maxSize - minSize) / (maxViewport - minViewport). ಈ ಇಳಿಜಾರನ್ನು ನಂತರ 100 ರಿಂದ ಗುಣಿಸಿ vw ಘಟಕಗಳಿಗೆ ಪರಿವರ್ತಿಸಲಾಗುತ್ತದೆ, ಇದು CSS ವ್ಯೂಪೋರ್ಟ್-ಸಾಪೇಕ್ಷ ಪ್ರಮಾಣೀಕರಣ ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬುದರ ಮೂಲಭಾಗ.
2. 2
   ಇಂಟರ್ಸೆಪ್ಟ್ ಪಡೆಯುವಿಕೆ

   ಒಂದು ಇಂಟರ್ಸೆಪ್ಟ್ ಆಫ್‌ಸೆಟ್ (px ಅಥವಾ rem ನಲ್ಲಿ) ಅನ್ನು ರೇಖೀಯ ಫಂಕ್ಷನ್ ಕನಿಷ್ಠ ವ್ಯೂಪೋರ್ಟ್‌ನಲ್ಲಿ ನಿಮ್ಮ ಕನಿಷ್ಠ ಗಾತ್ರವನ್ನು ನಿಖರವಾಗಿ ತಲುಪುವಂತೆ ಲೆಕ್ಕಹಾಕಲಾಗುತ್ತದೆ. ಒಟ್ಟಿಗೆ, ಇಳಿಜಾರು ಮತ್ತು ಇಂಟರ್ಸೆಪ್ಟ್ clamp() ಒಳಗಿನ ಆದ್ಯತೆಯ ಮೌಲ್ಯವನ್ನು ರೂಪಿಸುತ್ತವೆ — ನಿಜವಾಗಿ ಪ್ರಮಾಣಿಸುವ ಭಾಗ.
3. 3
   ಘಟಕ ಪರಿವರ್ತನೆ ಮತ್ತು ಔಟ್‌ಪುಟ್ ಫಾರ್ಮ್ಯಾಟಿಂಗ್

   ನೀವು rem ಔಟ್‌ಪುಟ್ ಆಯ್ಕೆ ಮಾಡಿದರೆ, clamp() ಸ್ಟ್ರಿಂಗ್‌ಗೆ ಬರೆಯುವ ಮೊದಲು ಪ್ರತಿ ಪಿಕ್ಸೆಲ್ ಮೌಲ್ಯವನ್ನು ನಿಮ್ಮ ಸಂರಚಿಸಿದ ರೂಟ್ ಫಾಂಟ್ ಗಾತ್ರದಿಂದ (ಡೀಫಾಲ್ಟ್ 16px) ಭಾಗಿಸಲಾಗುತ್ತದೆ. Tailwind ನ ಸಿಂಟ್ಯಾಕ್ಸ್ ಪ್ರಕಾರ ಸ್ಪೇಸ್‌ಗಳನ್ನು ಅಂಡರ್‌ಸ್ಕೋರ್‌ಗಳಿಂದ ಬದಲಾಯಿಸಿದ ಹೊಂದಾಣಿಕೆಯ Tailwind ನಿರಂಕುಶ-ಮೌಲ್ಯ ವರ್ಗವನ್ನೂ ಉತ್ಪಾದಿಸಲಾಗುತ್ತದೆ.
4. 4
   ಲೈವ್ ವ್ಯೂಪೋರ್ಟ್ ಸ್ಲೈಡರ್ ಮುನ್ನೋಟ

   ಒಂದು ರೇಂಜ್ ಸ್ಲೈಡರ್ ನಿಮಗೆ 320px ನಿಂದ 1920px ಅಗಲದವರೆಗೆ ಸ್ಕ್ರಬ್ ಮಾಡಲು ಅನುಮತಿಸುತ್ತದೆ. ಪ್ರತಿ ಸ್ಥಾನದಲ್ಲಿ ಅದೇ ಇಳಿಜಾರು-ಮತ್ತು-ಇಂಟರ್ಸೆಪ್ಟ್ ಸೂತ್ರ ನೈಜ ಸಮಯದಲ್ಲಿ ಕ್ಲ್ಯಾಂಪ್ಡ್ ಗಾತ್ರವನ್ನು ಮೌಲ್ಯಮಾಪನ ಮಾಡಿ ಆ ಲೆಕ್ಕಹಾಕಿದ ಪಿಕ್ಸೆಲ್ ಗಾತ್ರದಲ್ಲಿ ಮಾದರಿ ಪಠ್ಯವನ್ನು ರೆಂಡರ್ ಮಾಡುತ್ತದೆ, ಆದ್ದರಿಂದ ಏನನ್ನಾದರೂ ನಕಲಿಸುವ ಮೊದಲು ನೀವು ಪ್ರಮಾಣೀಕರಣ ವರ್ತನೆಯನ್ನು ನೋಡಬಹುದು.

ಸಂಬಂಧಿತ ಪರಿಕರಗಳು