CSS clamp() ģenerētājs bez maksas
Ģenerē plūstošu CSS clamp() vērtību responsvai tipogrāfijai un atstarpēm. Iestatiet min/max izmēru un skatāmā loga diapazonu, skatiet tiešraides priekšskatījumu un kopējiet vienas rindas CSS.
Attēlotais lielums dažādos skata platumos
clamp(min, preferred, max) vienmērīgi pielāgo vērtību atkarībā no skata un to fiksē pie min. un maks. Aizstāj mediju vaicājumu kopas tipogrāfijai, atstarpēm un platumiem ar vienu rindiņu.
Biežākie lietojumi
- Izveidojiet šķidru reaģējošu tipograijuVienmērīgi mēroņa šrifta izmērus starp mobilajiem un galda ierīcēm ar vienu rindiņu.
- Šķidri robežas un aizpildīšanaPadariet sekcijas spaicējumu augšanu ar skatību, nevis lēcienus pie pārrāvumiem.
- Aizstājiet mediju vaicājumus ar clamp()Sabruņojiet pārrāvumu pārrakstāšanas kaudzes vienā šķidrā vērtībā.
- Izveidojiet šķidru tipa skaluĢenerējiet konsekventes clamp() darbības dizaina sistēmas tipa skalai.
- Šķidrs varonis un ekrāna virsrakstiPadariet lielus kampanjas izkārtojuma virsrakstus dramatiskas, bet draudzīgas mēroga.
Kā tas darbojas
Šis rīks aprēķina CSS clamp() vērtības, izmantojot pašrakstītu lineāro interpolācijas formulu — bez bibliotēkām, bez servera saziņas. Jūs ievadāt divus izmērus un divus skata laukuma platumus; matemātika notiek uzreiz jūsu pārlūkprogrammā un rada gatavu ielīmēšanai clamp() izteiksmi ar vw balstītu vēlamo vērtību, kas gludi mēroga jūsu tekstu vai atstarpi starp šiem pārrāvuma punktiem.
- 1Lineārā slīpuma aprēķinsRīks aprēķina pikseli-pēc-pikseļa slīpumu: (maksIzmērs - minIzmērs) / (maksSkatlaukums - minSkatlaukums). Šis slīpums tad tiek konvertēts uz vw vienībām, reizinot ar 100, kas ir CSS skatlaukuma-relatīvās mērogošanas darbības kodols.
- 2Nogriezuma atvasināšanaNogriezuma nobīde (px vai rem) tiek aprēķināta tā, lai lineārā funkcija precīzi sasniegtu jūsu minimālo izmēru minimālajā skatlaukumā. Kopā slīpums un nogriezums veido vēlamo vērtību iekš clamp() — daļu, kas faktiski mērogojas.
- 3Vienību konvertēšana un izvades formatēšanaJa izvēlaties rem izvadi, katra pikseļu vērtība tiek dalīta ar jūsu konfigurēto saknes fonta izmēru (noklusējums 16px), pirms tiek ierakstīta clamp() virknē. Tiek radīta arī atbilstoša Tailwind patvaļīgas vērtības klase, ar atstarpēm aizstātām ar apakšsvītrām pēc Tailwind sintakses.
- 4Dzīvs skatlaukuma slīdņa priekšskatījumsDiapazona slīdnis ļauj pārslēgties no 320px līdz 1920px platumā. Katrā pozīcijā tā pati slīpuma-un-nogriezuma formula novērtē ierobežoto izmēru reālajā laikā un renderē parauga tekstu šajā aprēķinātajā pikseļu izmērā, tāpēc varat redzēt mērogošanas uzvedību pirms jebko kopējat.
Saistītie rīki
CSS režģa ģenerators
Vizuāli noformējiet CSS režģi — sliedes, vienības un spraugas — un kopējiet ģenerēto CSS un HTML.
Kāda ir mana ekrāna izšķirtspēja
Redziet sava ekrāna izšķirtspēju CSS un reālajos pikseļos, loga izmēru, pikseļu attiecību, krāsu dziļumu, HDR, skārienjutības atbalstu un atsvaidzes intensitāti, un kopējiet to visu.
Paraksta veidotājs
Uzzīmējiet parakstu ar peli, pirkstu vai stiluu, vai ierakstiet savu vārdu rokraksta fontā, tad eksportējiet to kā caurspīdīgu PNG vai SVG.