Joan eduki nagusira
LibraTool logoLibraTool

CSS clamp() Sortzailea doan

Sortu CSS clamp() balio jariakor bat tipografia eta espazio malguetarako. Ezarri min/max tamaina eta ikusgai-tartea, ikusi zuzeneko aurrebista eta kopiatu CSS lerro bakarra.

Linez kanpo funtzionatzen du behin kargatuta
Irteera-unitatea:
CSS balioa
font-size: clamp(1rem, 1.5023vw + 0.6479rem, 2rem);
Tailwind klasea
text-[clamp(1rem,1.5023vw_+_0.6479rem,2rem)]
768px zabal β†’ 21.9px
Aa 22px

Errendatutako tamaina ikuspegi-atal desberdinetan

375px zabalAa 16px
908px zabalAa 24px
1440px zabalAa 32px

clamp(min, hobetsia, max)-ek balio bat malguki eskuratzen du ikuspegi-atalarekin, gero min eta max-etan blokeatuz. Media-galdera pilak ordezkatzen ditu tipografia, tarte eta zabaleretatarako lerro bakar batean.

Ohiko erabilerak

  • Sortu Fluid Responsive TipografiaTamaina izkina lerroa mugimendu eta enpleguaren zehar bat lerro.
  • Fluid Margo eta FuntziaEgin atala beltza hazkuntza viewport ordez bat behaztean puntuak.
  • Ordezkatu Media Galderak clamp()Jausti batean galez jauzi bere emaitzak balio likido bat.
  • Eraikitzen Fluid Mota EskalatzeaSortu clamp() pausu dituzte talde-sistema mota eskalatzea.
  • Fluid Hero eta Pantaila EntzunburuakEgin berezko orri burua tamaina dramatikoa baina segurtasunez.

Nola Funtzionatzen Du

Tresna honek CSS clamp() balioak kalkulatzen ditu eskuz idatzitako interpolazio-formula lineal bat erabiliz β€” liburutegirik ez, zerbitzari-joan-etorririk ez. Bi tamaina eta bi ikuspegi-zabalera sartzen dituzu; matematika berehala exekutatzen da zure nabigatzailean eta zure tipoa edo tartea puntu horien artean leunki eskalatzen duen vw-oinarritutako hobetsitako balioa duen clamp() adierazpen itsatsi-prest bat sortzen du.

  1. 1
    Malda linealaren kalkulua
    Tresnak pixeleko-pixel malda bat kalkulatzen du: (maxTamaina - minTamaina) / (maxIkuspegi - minIkuspegi). Malda hau gero vw unitatetara bihurtzen da 100ez biderkatuz, hau baita CSS ikuspegi-erlatibo eskalatzeak nola funtzionatzen duen ardatza.
  2. 2
    Ordenatuaren eratorpena
    Ordenatu-desplazamendu bat (px edo rem-etan) kalkulatzen da funtzio linealak zure gutxieneko tamaina zehazki gutxieneko ikuspegian jo dezan. Elkarrekin, maldak eta ordenatuak clamp()-aren barruko hobetsitako balioa osatzen dute β€” benetan eskalatzen den zatia.
  3. 3
    Unitate-bihurketa eta irteera-formatua
    rem irteera aukeratzen baduzu, pixel-balio bakoitza zure konfiguratutako erro-letra-tamainaz zatitzen da (16px lehenetsia) clamp() katean idatzi aurretik. Tailwind balio arbitrario baliokide bat ere sortzen da, zuriuneak azpimarrez ordezkatuta Tailwinden sintaxiaren arabera.
  4. 4
    Ikuspegi-graduatzaile bizizko aurrebista
    Barruti-graduatzaile batek 320px-etik 1920px-eraino zabaltzeko aukera ematen dizu. Posizio bakoitzean malda-eta-ordenatu formula berak clamp-atutako tamaina denbora errealean ebaluatzen du eta lagin-testua tamaina kalkulatu horretan errendatzen du, beraz eskalatze-portaera ikus dezakezu ezer kopiatu baino lehen.

Erlazionatutako tresnak

🟦

CSS Sarearen Sortzeaila

Diseinatu ikustoki batean CSS sareak β€” pistak, unitateak eta tarteak β€” eta kopiatu sortutako CSS eta HTML.

Probatu
πŸ“

Zein da nire pantailaren bereizmena?

Ikusi zure pantailaren bereizmena CSS pixeletan eta benetako pixeletan, leihoaren tamaina, pixel-erlazioa, kolore-sakonera, HDR, ukipen-euskarria eta freskatze-tasa, eta kopiatu dena.

Probatu
Joera
✍️

Sinadura sortzailea

Marraztu sinadura bat saguarekin, hatzarekin edo arkatz digitalarekin, edo idatzi zure izena eskuizkribu letra-tipoan, gero esportatu PNG edo SVG gardena gisa.

Probatu

Maiz egiten diren galderak