Kalkulator i CSS clamp()
Vendosni një madhësi për ekranet e vegjël dhe të mëdhenj dhe merrni një vlerë fluide clamp() që shkallëzohet pa probleme në mes — për madhësitë e fonteve, padding, margin ose gap.
clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)Rezultati mban një pjesë rem në termin e mesëm, kështu që teksti përsëri zmadhohet kur dikush bën zoom në 200% — një vlerë vetëm për viewport nuk do ta bënte këtë.
Tekst fluid, me madhësinë e duhur.
Llogaritja kryhet tërësisht në shfletuesin tuaj. Asgjë që vendosni këtu nuk ngarkohet në BroBroGo.
Pyetje të shpeshta
Si e ndërton kalkulatori vlerën clamp()?
Ju i jepni dy pika: një madhësi në një gjerësi ekrani të vogël dhe një madhësi në një gjerësi ekrani të madh. Ai vizaton një vijë të drejtë midis tyre në mënyrë që madhësia të rritet pa probleme ndërsa ekrani zgjerohet, pastaj e mbështjell atë në clamp() në mënyrë që të mos bjerë kurrë nën madhësinë tuaj të ekranit të vogël ose të rritet mbi madhësinë tuaj të ekranit të madh. Midis dy gjerësive madhësia ndryshon në mënyrë fluide; jashtë tyre ajo qëndron në kufirin më të afërt.
Pse rezultati është në rem dhe vw në vend të pikselave?
Kufijtë janë në rem dhe pjesa e mesme që ndryshon mban një komponent rem, kështu që teksti përsëri rritet kur një lexues bën zoom ose rrit madhësinë e paracaktuar të fontit të shfletuesit të tij — një vlerë vetëm në piksela ose vetëm për viewport mund të parandalojë funksionimin e kësaj. Ju i shkruani madhësitë në piksela sepse kështu mendojnë shumica e njerëzve për to, dhe mjeti i konverton në rem duke përdorur madhësinë tuaj rrënjë të fontit.
A mund ta përdor këtë për hapësirat, jo vetëm për madhësinë e fontit?
Po. E njëjta vlerë funksionon për padding, margin, gap, gjerësi ose lartësi — kudo ku vendoset një gjatësi. Kaloni pamjen paraprake në "Kuti" për të parë hapësirën duke u rritur në vend të tekstit. Nëse madhësitë tuaja të vogla dhe të mëdha janë të njëjta, rezultati kthehet në një gjatësi të thjeshtë fikse, pasi nuk ka asgjë për të ndryshuar.
A e mbështesin të gjithë shfletuesit clamp()?
Po — çdo shfletues aktual e mbështet clamp() që nga viti 2020, kështu që mund ta përdorni vlerën siç është pa pasur nevojë për fallback. Për një maksimum shumë të madh ose një shkallë të shpejtë ndryshimi, ia vlen të bëni një kontroll të shpejtë në zoom 200% që teksti ende zmadhohet për lexuesit që kanë nevojë për të.