സൗജന്യ CSS clamp() ജനറേറ്റർ
റെസ്‌പോൺസീവ് ടൈപ്പോഗ്രഫിക്കും സ്‌പേസിംഗിനുമായി ഫ്ലൂയിഡ് CSS clamp() മൂല്യം ജനറേറ്റ് ചെയ്യുക. മിനിമം/മാക്സിമം വലുപ്പവും വ്യൂപോർട്ട് ശ്രേണിയും സെറ്റ് ചെയ്യുക, ലൈവ് പ്രിവ്യൂ കാണുക, ഒറ്റ-ലൈൻ CSS കോപ്പി ചെയ്യുക.
വ്യത്യസ്ത വ്യൂപോർട്ടുകളിൽ റെൻഡർ ചെയ്യുന്ന വലുപ്പം
clamp(min, preferred, max) ഒരു മൂല്യത്തെ വ്യൂപോർട്ടിനനുസരിച്ച് സുഗമമായി സ്കെയിൽ ചെയ്യുന്നു, പിന്നീട് min, max എന്നിവയിൽ ലോക്ക് ചെയ്യുന്നു. ടൈപ്പോഗ്രാഫി, സ്പേസിംഗ്, വീതി എന്നിവയ്ക്കുള്ള മീഡിയ ക്വറികളുടെ കൂട്ടത്തിന് പകരം ഇത് ഒറ്റ ലൈൻ മതി.
ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നു
ഈ ടൂൾ ഒരു കൈകൊണ്ട് എഴുതിയ ലീനിയർ ഇന്റർപൊളേഷൻ സൂത്രവാക്യം ഉപയോഗിച്ച് CSS clamp() മൂല്യങ്ങൾ കണക്കാക്കുന്നു — ലൈബ്രറികളില്ല, സെർവർ റൗണ്ട്-ട്രിപ്പുകളില്ല. നിങ്ങൾ രണ്ട് വലുപ്പങ്ങളും രണ്ട് വ്യൂപോർട്ട് വീതികളും നൽകുന്നു; ഗണിതം ഉടനടി നിങ്ങളുടെ ബ്രൗസറിൽ പ്രവർത്തിക്കുകയും ആ ബ്രേക്ക്പോയിന്റുകൾക്കിടയിൽ നിങ്ങളുടെ ടൈപ്പോ സ്പേസിംഗോ സുഗമമായി സ്കെയിൽ ചെയ്യുന്ന vw-അധിഷ്ഠിത ഇഷ്ട മൂല്യമുള്ള ഒരു പേസ്റ്റ്-റെഡി clamp() എക്സ്പ്രഷൻ നിർമ്മിക്കുകയും ചെയ്യുന്നു.
- 1ലീനിയർ ചരിവ് കണക്കുകൂട്ടൽടൂൾ ഒരു പിക്സൽ-പെർ-പിക്സൽ ചരിവ് കണക്കാക്കുന്നു: (maxSize - minSize) / (maxViewport - minViewport). ഈ ചരിവ് പിന്നെ 100 കൊണ്ട് ഗുണിച്ച് vw യൂണിറ്റുകളാക്കി മാറ്റുന്നു, CSS വ്യൂപോർട്ട്-ആപേക്ഷിക സ്കെയിലിംഗ് പ്രവർത്തിക്കുന്നതിന്റെ കാതൽ ഇതാണ്.
- 2ഇന്റർസെപ്റ്റ് ഉരുത്തിരിക്കൽമിനിമം വ്യൂപോർട്ടിൽ ലീനിയർ ഫംഗ്ഷൻ കൃത്യമായി നിങ്ങളുടെ മിനിമം വലുപ്പം എത്തുന്ന വിധം ഒരു ഇന്റർസെപ്റ്റ് ഓഫ്സെറ്റ് (px അല്ലെങ്കിൽ rem-ൽ) കണക്കാക്കുന്നു. ചരിവും ഇന്റർസെപ്റ്റും ചേർന്ന് clamp()-നുള്ളിലെ ഇഷ്ട മൂല്യം രൂപപ്പെടുത്തുന്നു — സ്കെയിൽ ചെയ്യുന്ന യഥാർത്ഥ ഭാഗം.
- 3യൂണിറ്റ് പരിവർത്തനവും ഔട്ട്പുട്ട് ഫോർമാറ്റിംഗുംനിങ്ങൾ rem ഔട്ട്പുട്ട് തിരഞ്ഞെടുത്താൽ, clamp() സ്ട്രിംഗിലേക്ക് എഴുതുന്നതിന് മുമ്പ് ഓരോ പിക്സൽ മൂല്യവും നിങ്ങളുടെ കോൺഫിഗർ ചെയ്ത റൂട്ട് ഫോണ്ട് വലുപ്പം (ഡിഫോൾട്ട് 16px) കൊണ്ട് ഹരിക്കപ്പെടുന്നു. Tailwind-ന്റെ സിന്റാക്സ് പ്രകാരം സ്പേസുകൾ അണ്ടർസ്കോറുകൾ കൊണ്ട് മാറ്റിയ ഒരു പൊരുത്തപ്പെടുന്ന Tailwind ഇഷ്ടാനുസൃത-മൂല്യ ക്ലാസും നിർമ്മിക്കപ്പെടുന്നു.
- 4തത്സമയ വ്യൂപോർട്ട് സ്ലൈഡർ പ്രിവ്യൂഒരു റേഞ്ച് സ്ലൈഡർ 320px മുതൽ 1920px വീതി വരെ സ്ക്രബ് ചെയ്യാൻ അനുവദിക്കുന്നു. ഓരോ സ്ഥാനത്തും അതേ ചരിവ്-ഇന്റർസെപ്റ്റ് സൂത്രവാക്യം clamp ചെയ്ത വലുപ്പം തത്സമയം വിലയിരുത്തുകയും ആ കണക്കാക്കിയ പിക്സൽ വലുപ്പത്തിൽ സാമ്പിൾ ടെക്സ്റ്റ് റെൻഡർ ചെയ്യുകയും ചെയ്യുന്നു, അതിനാൽ എന്തും പകർത്തുന്നതിന് മുമ്പ് നിങ്ങൾക്ക് സ്കെയിലിംഗ് സ്വഭാവം കാണാം.
അനുബന്ധ ടൂളുകൾ
CSS ഗ്രിഡ് ജനറേറ്റർ
CSS ഗ്രിഡ് ദൃശ്യപരമായി ഡിസൈൻ ചെയ്യുക — ട്രാക്കുകൾ, യൂണിറ്റുകൾ, ഗ്യാപ്പുകൾ — തുടർന്ന് ജനറേറ്റ് ചെയ്ത CSS-ഉം HTML-ഉം കോപ്പി ചെയ്യുക.
സിഗ്നേച്ചർ മേക്കർ
നിങ്ങളുടെ മൗസ്, വിരൽ, അല്ലെങ്കിൽ സ്റ്റൈലസ് ഉപയോഗിച്ച് ഒരു ഒപ്പ് വരയ്ക്കുക, അല്ലെങ്കിൽ കൈയക്ഷര ഫോണ്ടിൽ നിങ്ങളുടെ പേര് ടൈപ്പ് ചെയ്യുക, പിന്നെ അത് സുതാര്യമായ PNG അല്ലെങ്കിൽ SVG ആയി എക്സ്പോർട്ട് ചെയ്യുക.
പിക്സൽ ടു REM കൺവെർട്ടർ
ക്രമീകരിക്കാവുന്ന ബേസ് ഫോണ്ട് വലുപ്പത്തോടെ px, rem, em, pt, vw, vh, % എന്നിവയ്ക്കിടയിൽ പരിവർത്തനം ചെയ്യുക. സാധാരണ പിക്സൽ വലുപ്പങ്ങൾക്കായി ഒരു റഫറൻസ് ടേബിൾ ഉൾപ്പെടുന്നു.