CSS clamp() kalkulators

Ievadiet izmēru maziem un lieliem ekrāniem un iegūstiet plūstošu clamp() vērtību, kas vienmērīgi mērogojas starp tiem — fontu izmēriem, iekšējām un ārējām malām vai spraugām.

Izmēri
Minimums
Maksimums
clamp() vērtība
clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)

Rezultāts saglabā rem daļu vidējā izteiksmē, tāpēc teksts joprojām palielinās, kad lietotājs pietuvina līdz 200% — tikai skatvietas (viewport) vērtība to nepieļautu.

Priekšskatījums

Plūstošs teksts, tieši vajadzīgajā izmērā.

Pielāgojiet izmērus un ekrāna platumus, lai veidotu vērtību.

Aprēķins pilnībā notiek jūsu pārlūkprogrammā. Nekas no šeit ievadītā netiek augšupielādēts BroBroGo.

BUJ

Kā kalkulators izveido clamp() vērtību?

Jūs norādāt divus punktus: izmēru pie maza ekrāna platuma un izmēru pie liela ekrāna platuma. Kalkulators novelk taisnu līniju starp tiem, lai izmērs vienmērīgi pieaugtu, ekrānam paplašinoties, un pēc tam ietver to clamp() funkcijā, lai tas nekad nenokristu zem mazā ekrāna izmēra un nepārsniegtu lielā ekrāna izmēru. Starp abiem platumiem izmērs mainās plūstoši, bet ārpus tiem paliek pie tuvākās robežas.

Kāpēc rezultāts ir rem un vw, nevis pikseļos?

Robežas ir izteiktas rem mērvienībās, un mainīgā vidējā daļa saglabā rem komponentu, tāpēc teksts joprojām aug, kad lasītājs pietuvina lapu vai palielina pārlūkprogrammas noklusējuma fonta lielumu. Pikseļu vai tikai skatvietas (viewport) vērtības var traucēt šai darbībai. Jūs ievadāt izmērus pikseļos, jo tā ir vieglāk domāt, un rīks tos pārvērš uz rem, izmantojot jūsu saknes fonta lielumu.

Vai es varu to izmantot atstarpēm, nevis tikai fonta izmēram?

Jā. To pašu vērtību var izmantot iekšējām un ārējām malām (padding, margin), spraugām (gap), platumam vai augstumam — jebkur, kur tiek izmantots garums. Pārslēdziet priekšskatījumu uz "Kaste" (Box), lai vērotu, kā aug atstarpes, nevis teksts. Ja jūsu mazais un lielais izmērs ir vienādi, rezultāts kļūst par vienkāršu fiksētu garumu, jo nav ko mērogot.

Vai visi pārlūki atbalsta clamp()?

Jā — visi mūsdienu pārlūki atbalsta clamp() kopš 2020. gada, tāpēc varat izmantot šo vērtību bez rezerves variantiem. Pie ļoti liela maksimuma vai straujas izmaiņu intensitātes ir vērts ātri pārbaudīt pie 200% tālummaiņas, vai teksts joprojām palielinās lasītājiem, kam tas nepieciešams.

CSS Cubic Bezier ģeneratorsVelciet abus rokturus, lai veidotu paātrinājuma līkni, vērojiet punkta kustību pret vienmērīgu kustību un nokopējiet cubic-bezier() vērtību.Box Shadow ģeneratorsVelciet slīdņus, lai veidotu box-shadow ēnu, klājiet slāņus dziļumam un acumirklī nokopējiet gatavo CSS.Gradientu ģeneratorsIzveidojiet lineāru, radiālu vai konisku gradientu, pievienojiet krāsu punktus, iestatiet virzienu un nokopējiet CSS ar vienu klikšķi.Border Radius ģeneratorsNoapaļojiet katru stūri ar slīdņiem, veidojiet organiskas lāses formas ar eliptisko režīmu un acumirklī nokopējiet CSS.Flexbox ģeneratorsIestatiet flex konteineru un tā elementus ar vizuālām vadīklām, vērojiet izkārtojuma reakciju reāllaikā un nokopējiet CSS ar vienu klikšķi.CSS Grid ģeneratorsIestatiet kolonnas un rindas, velciet pāri šūnām, lai izvietotu elementus, un ar vienu klikšķi nokopējiet režģa CSS kopā ar atbilstošo HTML.CSS sakārtotājs un minimizētājsSakārtojiet nekārtīgu CSS, lai to būtu vieglāk lasīt, vai minimizējiet to publicēšanai — ar drošu režīmu, kas nekad nemaina kārtulu secību.px uz rem un em konvertētājsKonvertējiet starp px, rem un em, izmantojot savus saknes un konteksta fontu izmērus — rediģējiet jebkuru lauku, un pārējie divi tiks atjaunināti rakstīšanas laikā.