CSS clamp() kalkulátor

Adja meg a kis és nagy képernyőkhöz tartozó méretet, és kapjon egy folyékony clamp() értéket, amely zökkenőmentesen skálázódik a kettő között – betűméretekhez, belső és külső margókhoz vagy résekhez.

Méretek
Minimum
Maximum
clamp() érték
clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)

Az eredmény a középső tagban megtart egy rem részt, így a szöveg továbbra is nagyítható marad, ha valaki 200%-ra nagyítja a nézetet – egy tisztán viewport-alapú érték ezt nem tenné lehetővé.

Előnézet

Folyékonyan skálázódó szöveg, pont megfelelő méretben.

Állítsa be a méreteket és a képernyőszélességeket az érték kialakításához.

A számítás teljes egészében a böngészőjében történik. Semmilyen megadott adat nem kerül feltöltésre a BroBroGo szervereire.

GYIK

Hogyan építi fel a kalkulátor a clamp() értéket?

Két pontot kell megadnia: egy méretet kis képernyőszélességnél és egy méretet nagy képernyőszélességnél. A kalkulátor egy egyenes vonalat húz a kettő között, így a méret a képernyő szélesedésével zökkenőmentesen növekszik, majd ezt egy clamp() függvénybe csomagolja, hogy a méret soha ne essen a kis képernyős méret alá, és ne lépje túl a nagy képernyős méretet. A két szélesség között a méret folyamatosan skálázódik; azokon kívül pedig beáll a legközelebbi határértékre.

Miért rem és vw egységben kapom az eredményt képpontok helyett?

A határértékek rem-ben vannak megadva, és a változó középső rész is tartalmaz egy rem összetevőt, így a szöveg akkor is növekszik, ha a felhasználó ráközelít vagy növeli a böngésző alapértelmezett betűméretét – a tisztán képpont- vagy viewport-alapú értékek ezt megakadályozhatják. A méreteket képpontban (px) kell megadnia, mert a legtöbben így gondolnak rájuk, az eszköz pedig a gyökér betűméret (root font size) alapján konvertálja azokat rem-be.

Használhatom ezt térközökhöz is, nem csak betűmérethetz?

Igen. Ugyanez az érték működik belső margó (padding), külső margó (margin), rés (gap), szélesség vagy magasság esetén is – bárhol, ahol hosszúságértéket használunk. Váltson a nézetben a Doboz (Box) módra, hogy lássa, hogyan növekszik a térköz a szöveg helyett. Ha a kis és nagy méretek megegyeznek, az eredmény egy egyszerű fix hosszúságra egyszerűsödik, mivel nincs mit skálázni.

Minden böngésző támogatja a clamp() függvényt?

Igen – 2020 óta minden modern böngésző támogatja a clamp() függvényt, így az értéket közvetlenül, alternatív megoldás (fallback) nélkül használhatja. Nagyon nagy maximum értékeknél vagy gyors változási ütemnél érdemes 200%-os nagyításon ellenőrizni, hogy a szöveg továbbra is megfelelően növekszik-e a rászoruló felhasználók számára.

CSS Cubic Bezier generátorHúzza a két fogantyút az átmeneti görbe formálásához, figyelje a pont mozgását a lineárissal szemben, és másolja ki a cubic-bezier() értéket.Box Shadow generátorHúzza a csúszkákat a box-shadow alakításához, halmozzon fel rétegeket a mélységért, és másolja ki azonnal a kész CSS-kódot.Színátmenet generátorHozzon létre lineáris, radiális vagy kúpos színátmenetet, adjon hozzá színpontokat, állítsa be az irányt, és másolja ki a CSS-t egyetlen kattintással.Border Radius generátorKerekítse le a sarkokat csúszkákkal, hozzon létre organikus amőba alakzatokat az elliptikus móddal, és másolja ki azonnal a CSS-kódot.Flexbox generátorÁllítson be egy flex konténert és elemeit vizuális vezérlőkkel, kövesse az elrendezés élő változását, és másolja ki a CSS-t egyetlen kattintással.CSS Grid generátorÁllítsa be az oszlopokat és sorokat, húzza végig a kurzort a cellákon az elemek elhelyezéséhez, és másolja ki a grid CSS-t a hozzá tartozó HTML-lel egyetlen kattintással.CSS Szépítő és TömörítőIgazítsa újra a rendezetlen CSS-t az olvashatóságért, vagy tömörítse az élesítéshez – egy olyan biztonságos móddal, amely soha nem rendezi át a szabályokat.px – rem és em konvertálóKonvertáljon px, rem és em egységek között saját gyökér- és környezeti betűméretei alapján – szerkesszen bármely mezőt, és a másik kettő gépelés közben frissül.