இலவச CSS clamp() உருவாக்கி

இது எவ்வாறு செயல்படுகிறது

இந்தக் கருவி கையால் எழுதிய நேரியல் interpolation சூத்திரம் மூலம் CSS clamp() மதிப்புகளைக் கணக்கிடுகிறது — நூலகங்கள் இல்லை, சர்வர் பயணங்கள் இல்லை. நீங்கள் இரண்டு அளவுகளையும் இரண்டு viewport அகலங்களையும் உள்ளிடுகிறீர்கள்; கணிதம் உடனே உங்கள் உலாவியில் இயங்கி, அந்த breakpoints இடையே உங்கள் எழுத்து அல்லது இடைவெளியை மென்மையாக அளவிடும் vw அடிப்படை preferred மதிப்புடன் ஒட்டத் தயாரான clamp() expression ஐத் தருகிறது.

1. 1
   நேரியல் சாய்வுக் கணக்கீடு

   கருவி pixel-per-pixel சாய்வைக் கணக்கிடுகிறது: (maxSize - minSize) / (maxViewport - minViewport). இந்தச் சாய்வு 100 ஆல் பெருக்கப்பட்டு vw அலகுகளாக மாற்றப்படுகிறது; CSS viewport-சார்ந்த அளவிடல் வேலை செய்வதன் மையம் இதுவே.
2. 2
   Intercept பெறுதல்

   நேரியல் function குறைந்தபட்ச viewport இல் சரியாக உங்கள் குறைந்தபட்ச அளவைத் தொடும்படி intercept ஈடு (px அல்லது rem இல்) கணக்கிடப்படுகிறது. சாய்வும் intercept உம் சேர்ந்து clamp() உள்ளே preferred மதிப்பை உருவாக்குகின்றன — உண்மையில் அளவிடும் பகுதி.
3. 3
   அலகு மாற்றம் மற்றும் வெளியீட்டு வடிவமைப்பு

   rem வெளியீட்டைத் தேர்ந்தெடுத்தால், ஒவ்வொரு pixel மதிப்பும் clamp() string இல் எழுதப்படும் முன் நீங்கள் அமைத்த root font அளவால் (இயல்புநிலை 16px) வகுக்கப்படுகிறது. Tailwind syntax படி இடைவெளிகள் underscores ஆக மாற்றப்பட்ட பொருந்தும் Tailwind arbitrary-value class உம் உருவாக்கப்படுகிறது.
4. 4
   நேரலை viewport ஸ்லைடர் முன்னோட்டம்

   range ஸ்லைடர் 320px முதல் 1920px அகலம் வரை நகர்த்த அனுமதிக்கிறது. ஒவ்வொரு நிலையிலும் அதே சாய்வு-intercept சூத்திரம் clamp செய்த அளவை நேரலையாகக் கணக்கிட்டு, அந்த pixel அளவில் மாதிரி உரையைக் காட்டுகிறது; எனவே எதையும் நகலெடுக்கும் முன் அளவிடல் நடத்தையைக் காணலாம்.

தொடர்புடைய கருவிகள்