CSS clamp() ஃப்ளூயிட் டைப்போகிராஃபி கால்குலேட்டர்

CSS clamp() ஃப்ளூயிட் டைப்போகிராஃபி கால்குலேட்டர்

ஃப்ளூயிட் டைப்போகிராஃபி என்பது மீடியா குவெரி ப்ரேக்பாயிண்டுகளில் திடீரென மாறுவதற்குப் பதிலாக, வியூபோர்ட்டுடன் சேர்ந்து ஃபாண்ட் அளவை மென்மையாக மாற்ற அனுமதிக்கிறது. CSS-இன் clamp() செயல்பாடு இதை ஒரே வரியில் சாத்தியமாக்குகிறது: இது ஒரு குறைந்தபட்ச மதிப்பு, ஒரு விருப்பமான மதிப்பு (பொதுவாக வியூபோர்ட்-அகல அலகுகளில்), ஒரு அதிகபட்ச மதிப்பு ஆகியவற்றை எடுத்துக்கொள்கிறது, வியூபோர்ட் அளவு மாறும்போது உலாவி இவற்றுக்கு இடையே தொடர்ந்து இன்டர்பொலேட் செய்கிறது.

இந்த கால்குலேட்டர் என்ன செய்கிறது

நீங்கள் வழங்குவது:

• ஒரு குறைந்தபட்ச வியூபோர்ட் அகலமும் அதில் (அல்லது அதற்குக் கீழே) தேவையான ஃபாண்ட் அளவும்
• ஒரு அதிகபட்ச வியூபோர்ட் அகலமும் அதில் (அல்லது அதற்கு மேல்) தேவையான ஃபாண்ட் அளவும்
• உங்கள் ரூட் ஃபாண்ட் அளவு (பொதுவாக 16px, பிக்சல் மதிப்புகளை rem-ஆக மாற்ற பயன்படுகிறது)

அந்த இரண்டு புள்ளிகளையும் இணைக்கும் நேரியல் செயல்பாட்டை கால்குலேட்டர் கணக்கிட்டு, அதை பயன்படுத்தத் தயாரான clamp() அறிக்கையாக வெளிப்படுத்துகிறது, மேலும் பொதுவான டிவைஸ் ப்ரேக்பாயிண்டுகளில் கிடைக்கும் ஃபாண்ட் அளவைக் காட்டும் ஒரு முன்னோட்ட அட்டவணையையும் தருகிறது.

சூத்திரம்

குறைந்தபட்ச மற்றும் அதிகபட்ச வியூபோர்ட் அகலங்களுக்கு இடையே, ஃபாண்ட் அளவு வியூபோர்ட் அகலத்துடன் நேரியல் முறையில் அளவு மாறுகிறது. மாற்றத்தின் வீதம் ("ஸ்லோப்"):

$$slope = \frac{maxFontSize - minFontSize}{maxViewport - minViewport}$$

அந்த ஸ்லோப், சதவீதமாக வெளிப்படுத்தப்படும்போது, விருப்பமான மதிப்பில் வியூபோர்ட்-அகல (vw) குணகமாக மாறுகிறது. கோட்டின் y-இன்டர்செப்ட் (rem-இல்) கூட்டு மாறிலியாக மாறுகிறது:

$$preferred(rem) = yIntercept + slope \times 100 \times vw$$

குறைந்தபட்ச வியூபோர்ட்டுக்குக் கீழே, மதிப்பு minFontSize-க்கு கிளாம்ப் செய்யப்படுகிறது. அதிகபட்ச வியூபோர்ட்டுக்கு மேலே, இது maxFontSize-க்கு கிளாம்ப் செய்யப்படுகிறது. இதைத்தான் clamp(min, preferred, max) CSS-இல் இயல்பாகவே செய்கிறது - எந்த மீடியா குவெரியும் தேவையில்லை.

இதை எப்படி பயன்படுத்துவது

1. உங்கள் குறைந்தபட்ச வியூபோர்ட் அகலத்தையும் (எ.கா. சிறிய போன்களுக்கு 320px) அங்கு தேவையான ஃபாண்ட் அளவையும் உள்ளிடவும்.
2. உங்கள் அதிகபட்ச வியூபோர்ட் அகலத்தையும் (எ.கா. சாதாரண டெஸ்க்டாப்புக்கு 1440px) அங்கு தேவையான ஃபாண்ட் அளவையும் உள்ளிடவும்.
3. உங்கள் ரூட் ஃபாண்ட் அளவு இயல்புநிலை 16px இல்லாவிட்டால் அதை உள்ளிடவும்.
4. உருவாக்கப்பட்ட font-size: clamp(...) அறிக்கையை நேரடியாக உங்கள் CSS-இல் நகலெடுக்கவும்.
5. உங்களுக்கு முக்கியமான ப்ரேக்பாயிண்டுகளில் அளவு சரியாகத் தெரிகிறதா என்பதை உறுதிப்படுத்த முன்னோட்ட அட்டவணையைப் பாருங்கள்.

தீர்க்கப்பட்ட உதாரணம்

பாடி டெக்ஸ்ட் 320px அகலமுள்ள போனில் 16px முதல் 1280px அகலமுள்ள டெஸ்க்டாப்பில் 20px வரை அளவு மாற வேண்டும் என்று வைத்துக்கொள்வோம், 16px ரூட் ஃபாண்ட் அளவுடன்:

• ஸ்லோப்: (20 - 16) / (1280 - 320) = 0.004167 px per px, அல்லது 0.4167vw
• Y-இன்டர்செப்ட்: 16 - 0.004167 × 320 = 14.667px → 0.9167rem
• முடிவு: font-size: clamp(1rem, 0.9167rem + 0.4167vw, 1.25rem);

768px வியூபோர்ட்டில், இது சுமார் 17.87px ஆக மதிப்பிடப்படுகிறது - இடையில் மென்மையாக, எந்த குறிப்பிட்ட ப்ரேக்பாயிண்டிலும் தெரியும் "தாவல்" இல்லாமல்.

மீடியா குவெரிகளுக்குப் பதிலாக clamp() ஏன் பயன்படுத்த வேண்டும்

• பராமரிக்க வேண்டிய ப்ரேக்பாயிண்டுகள் குறைவு: ஒரே ஒரு அறிக்கை பல @media விதிகளை மாற்றுகிறது.
• தெரியும் தாவல்கள் இல்லை: விண்டோ அளவு மாற்றப்படும்போது உரை தொடர்ந்து அளவு மாறுகிறது, இது திடீர் மாற்றத்தை விட மெருகூட்டப்பட்டதாக உணரப்படுகிறது.
• இயல்பாகவே அணுகக்கூடியது: மதிப்பு உண்மையான rem-அடிப்படையிலான அளவுகளில் குறைந்தபட்சமாகவும் அதிகபட்சமாகவும் இருப்பதால், இது நிலையான-vw அளவீட்டை மட்டும் பயன்படுத்துவதற்கு மாறாக, பயனரின் உலாவி ஜூம் மற்றும் அடிப்படை ஃபாண்ட் அளவு அமைப்புகளை மதிக்கிறது.