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 സൈസിംഗിൽ നിന്ന് വ്യത്യസ്തമായി.