CSS clamp() kalkulaator

Sisestage suurus väikeste ja suurte ekraanide jaoks ning saate sujuvalt skaleeruva clamp() väärtuse fondi suuruste, paddingute, marginite või gapide jaoks.

Suurused
Miinimum
Maksimum
clamp() väärtus
clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)

Tulemus säilitab keskmises liikmes rem-osa, mistõttu tekst suureneb endiselt, kui kasutaja suumib 200%-ni – ainult vaateavast (viewport) sõltuv väärtus seda ei teeks.

Eelvaade

Sujuvalt muutuv tekst, täpselt õiges suuruses.

Reguleerige suurusi ja ekraani laiust väärtuse kujundamiseks.

Arvutused toimuvad täielikult teie brauseris. Midagi teie sisestatust ei laadita BroBroGo serverisse.

KKK

Kuidas kalkulaator clamp() väärtuse koostab?

Määrate kaks punkti: suuruse väikese ekraani laiuse juures ja suuruse suure ekraani laiuse juures. Kalkulaator joonistab nende vahele sirge, et suurus kasvaks sujuvalt ekraani laienedes, ning mhib selle funktsiooni clamp(), et see ei langeks kunagi alla väikese ekraani suuruse ega tõuseks üle suure ekraani suuruse. Kahe laiuse vahel muutub suurus sujuvalt; väljaspool neid püsib see lähimal piiril.

Miks on tulemus pikslite asemel rem- ja vw-ühikutes?

Piirid on rem-ühikutes ja muutuv keskmine osa säilitab rem-komponendi, nii et tekst kasvab endiselt, kui lugeja suumib sisse või suurendab brauseri vaikimisi fondi suurust – piksli- või ainult vaateavapõhine väärtus võib selle toimimise takistada. Sisestate suurused pikslites, kuna enamik inimesi mõtleb neis, ja tööriist teisendab need rem-ühikuteks, kasutades teie juurfondi suurust.

Kas saan seda kasutada ka vahemike (spacing), mitte ainult fondi suuruse jaoks?

Jah. Sama väärtus toimib ka paddingu, margini, gapi, laiuse või kõrguse puhul – igal pool, kuhu sobib pikkusühik. Lülitage eelvaade režiimile Kast (Box), et näha teksti asemel vahemike sujuvat muutumist. Kui teie väike ja suur suurus on võrdsed, taandub tulemus tavaliseks fikseeritud pikkuseks, kuna midagi pole vaja skaleerida.

Kas kõik brauserid toetavad funktsiooni clamp()?

Jah — kõik kaasaegsed brauserid toetavad clamp() funktsiooni alates 2020. aastast, seega saate väärtust kasutada otse ilma varulahenduseta. Väga suure maksimumi või kiire muutumiskiiruse korral tasub 200% suumiga korraks kontrollida, kas tekst suureneb endiselt lugejate jaoks, kes seda vajavad.

CSS Cubic Bezier generaatorLohistage kahte pidet üleminekukõvera kujundamiseks, vaadake punkti liikumist võrdluses ühtlase liikumisega ja kopeerige cubic-bezier() väärtus.Box Shadow generaatorLohistage liugureid box-shadow kujundamiseks, lisage sügavuse saavutamiseks kihte ja kopeerige valmis CSS kohe.Gradiendi generaatorLooge lineaarseid, radiaalseid või koonilisi gradiente, lisage värvipunkte ja määrake suund ning kopeerige CSS ühe klõpsuga.Border Radiuse generaatorÜmardage iga nurka liuguritega, kujundage orgaanilisi mulle elliptilise režiimiga ja kopeerige CSS kohe.Flexboxi generaatorSeadistage flex-konteiner ja selle elemendid visuaalsete juhtnuppudega, vaadake paigutuse reageerimist reaalajas ja kopeerige CSS ühe klõpsuga.CSS Gridi generaatorMäärake veerud ja read, lohistage üle lahtrite elementide paigutamiseks ning kopeerige griddi CSS koos sobiva HTML-iga ühe klõpsuga.CSS-i kujundaja ja minimeerijaTaandage sassis CSS-i, et seda oleks lihtne lugeda, või minimeerige seda avaldamiseks – turvalise režiimiga, mis ei muuda kunagi reeglite järjekorda.px to rem & em konverterTeisendage px, rem ja em vahel, kasutades oma juur- ja kontekstifondi suurusi — muutke mistahes välja ja ülejäänud kaks uuenevad tippimise ajal.