Dizajn / Prilagodljiv dizajn
CSS clamp() generator za fluidnu tipografiju i razmake
Unesite najmanju i najveću veličinu i širine viewporta na kojima se primenjuju, pa dobijte clamp() izraz u rem jedinicama koji se glatko prilagođava između njih, uz tabelu veličina na uobičajenim širinama ekrana.
CSS clamp() generator za fluidnu tipografiju i razmake: Alat povlači pravu liniju kroz dve tačke: od 16 px na viewportu širine 320 px do 24 px na širini od 1280 px, veličina raste za 0.8333 px na svakih 100 px širine. Linija se zapisuje kao fiksni rem deo plus vw deo, 0.8333rem + 0.8333vw, a clamp() je zadržava između 1rem i 1.5rem izvan tog raspona. Radi 100% lokalno u vašem pregledaču, bez otpremanja datoteka na server.
- Kategorija
- Alatke za programere
- Pokretanja
- U vašem pregledaču
- Trošak
- Besplatno · bez registracije
- Dostupnost
- Spremno za upotrebu
U potpunosti radi u vašem pregledaču
CSS
font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);
| Širina prikaza | Veličina |
|---|---|
| 320 px | 16 px |
| 375 px | 16,46 px |
| 768 px | 19,73 px |
| 800 px | 20 px |
| 1024 px | 21,87 px |
| 1280 px | 24 px |
| 1440 px | 24 px |
| 1920 px | 24 px |
Srednja vrednost funkcije clamp() predstavlja pravu liniju kroz dve tačke koje unesete: ona dodaje fiksnu rem vrednost delu širine prikaza, pa se veličina ravnomerno menja između te dve širine i zaustavlja na ograničenjima izvan njih. Korišćenje jedinice rem za fiksni deo omogućava da veličina reaguje na podešavanje veličine fonta čitaoca. Ovo funkcioniše za bilo koju dužinu: veličine fonta, unutrašnje margine, razmake ili spoljne margine.
Primer sa izračunavanjem
Za naslov veličine 32 px na telefonu širine 375 px i 48 px na desktopu širine 1440 px, nagib je 16 ÷ 1065 = 1.5023 px na 100 px, a izraz glasi clamp(2rem, 1.6479rem + 1.5023vw, 3rem). Na tabletu širine 800 px naslov ima 38.38 px.
Pristupačnost
WCAG zahteva da tekst može da se uveća na 200%. Pošto deo fluidne veličine zavisi od širine prikaza, veoma strmi nagibi mogu da spreče da uvećavanje učini tekst znatno većim; neka najveća veličina ne bude veća od približno 2.5 puta najmanje, a za izbor ujednačenih koraka koristite generator tipografske skale.
Kako se koristi
- Unesite najmanju i najveću veličinu u px.
- Unesite širine viewporta na kojima treba da se primenjuju.
- Kopirajte clamp() vrednost i proverite veličine u tabeli.
Privatnost i ograničenja
Izračunavanje se obavlja u vašem pregledaču.
Srodne alatke
Često postavljana pitanja
Zašto jednostavno ne koristiti vw?
Veličina izražena samo u vw jedinicama zanemaruje podešavanje veličine fonta čitaoca i može postati premala na telefonima ili ogromna na širokim ekranima. rem deo i ograničenja u clamp() rešavaju oba problema.
Da li clamp() radi svuda?
Da: svaki aktuelni pregledač podržava clamp() još od 2020.
Može li veličina da se smanjuje na širim ekranima?
Da: unesite veću veličinu za najmanju širinu, pa će izraz umesto toga oduzimati vw deo.
Besplatan alat · pokretanja: u vašem pregledaču · nalog nije potreban