CSS clamp() കാൽക്കുലേറ്റർ

നിങ്ങൾ ഇതിന് രണ്ട് പോയിന്റുകൾ നൽകുന്നു: ഒരു ചെറിയ സ്ക്രീൻ വീതിയിലെ വലുപ്പവും വലിയ സ്ക്രീൻ വീതിയിലെ വലുപ്പവും. ഇത് അവയ്ക്കിടയിൽ ഒരു നേർരേഖ വരയ്ക്കുന്നു, അതിനാൽ സ്ക്രീൻ വീതികൂടുമ്പോൾ വലുപ്പം സുഗമമായി വളരുന്നു, തുടർന്ന് അതിനെ clamp() ൽ പൊതിയുന്നു, അതിനാൽ ഇത് ഒരിക്കലും നിങ്ങളുടെ ചെറിയ സ്ക്രീൻ വലുപ്പത്തിന് താഴെയാകുകയോ വലിയ സ്ക്രീൻ വലുപ്പത്തിന് മുകളിലാകുകയോ ഇല്ല. രണ്ട് വീതികൾക്കിടയിൽ വലുപ്പം സുഗമമായി മാറുന്നു; അവയ്ക്ക് പുറത്ത് അത് ഏറ്റവും അടുത്തുള്ള പരിധിയിൽ നിലനിൽക്കുന്നു.

പരിധികൾ rem-ലാണ്, കൂടാതെ മാറുന്ന മധ്യഭാഗം ഒരു rem ഘടകം നിലനിർത്തുന്നു, അതിനാൽ ഒരു വായനക്കാരൻ സൂം ചെയ്യുമ്പോഴോ അവരുടെ ബ്രൗസറിന്റെ ഡിഫോൾട്ട് ഫോണ്ട് സൈസ് വർദ്ധിപ്പിക്കുമ്പോഴോ ടെക്സ്റ്റ് ഇപ്പോഴും വളരുന്നു — പിക്സൽ അല്ലെങ്കിൽ വ്യൂപോർട്ട് മാത്രമുള്ള മൂല്യം അത് തടഞ്ഞേക്കാം. മിക്ക ആളുകളും പിക്സലിൽ ചിന്തിക്കുന്നതിനാലാണ് നിങ്ങൾ വലുപ്പങ്ങൾ പിക്സലിൽ ടൈപ്പ് ചെയ്യുന്നത്, കൂടാതെ ടൂൾ നിങ്ങളുടെ റൂട്ട് ഫോണ്ട് സൈസ് ഉപയോഗിച്ച് rem-ലേക്ക് പരിവർത്തനം ചെയ്യുന്നു.

അതെ. പാഡിംഗ്, മാർജിൻ, ഗ്യാപ്പ്, വീതി അല്ലെങ്കിൽ ഉയരം — നീളം ഉപയോഗിക്കുന്ന എവിടെയും ഇതേ മൂല്യം പ്രവർത്തിക്കും. ടെക്സ്റ്റിന് പകരം സ്പേസിംഗ് വളരുന്നത് കാണാൻ പ്രിവ്യൂ ബോക്സിലേക്ക് (Box) മാറ്റുക. നിങ്ങളുടെ ചെറുതും വലുതുമായ വലുപ്പങ്ങൾ ഒന്നാണെങ്കിൽ, സ്കെയിൽ ചെയ്യാൻ ഒന്നുമില്ലാത്തതിനാൽ ഫലം ഒരു നിശ്ചിത നീളത്തിലേക്ക് ചുരുങ്ങുന്നു.

അതെ — 2020 മുതൽ നിലവിലുള്ള എല്ലാ ബ്രൗസറുകളും clamp() പിന്തുണയ്ക്കുന്നുണ്ട്, അതിനാൽ നിങ്ങൾക്ക് ഫാൾബാക്ക് ഇല്ലാതെ തന്നെ ഈ മൂല്യം ഉപയോഗിക്കാം. വളരെ വലിയ പരമാവധി വലുപ്പത്തിലോ വേഗത്തിലുള്ള മാറ്റത്തിലോ, ആവശ്യമുള്ള വായനക്കാർക്കായി ടെക്സ്റ്റ് ഇപ്പോഴും വലുതാകുന്നുണ്ടെന്ന് 200% സൂമിൽ വേഗത്തിലൊന്ന് പരിശോധിക്കുന്നത് നല്ലതാണ്.