Reageeriva veebidisaini valdamine CSS-i matemaatikafunktsioonidega

Matemaatika on hea, matemaatika on suurepärane, kuid kas soovite kulutada aega arvutuste tegemiseks, kui teie stiilileht saab seda teie eest teha?

CSS-il on kolm käepärast matemaatikafunktsiooni, mis muudavad teie veebisaitide kujundamise viisi. Näitame teile, kuidas ja miks peaksite neid kasutama.

Tutvustame matemaatikat CSS-i

CSS on peamiselt deklaratiivne, kuid versioonid on keelde lisanud funktsioone. Nüüd on spetsifikatsioonis palju funktsioone ja kolm kõige lihtsamat matemaatilist funktsiooni võivad osutuda väga kasulikuks: calc, max ja min.

Sa võid kasutada see lihtne CodePeni näide et aidata juhendit järgida.

CSS calc() matemaatiline funktsioon

Funktsioon CSS calc() teeb lihtsa arvutuse ja kasutab tulemust atribuudi väärtusena. See tähendab, et saate määrata dünaamilisi väärtusi sellistele omadustele nagu kõrgus ja laius, ilma CSS @media päringud.

See funktsioon toetab liitmist (+), korrutamist (*), lahutamist (-) ja jagamist (/) ühe operaatoriga.

Näide: Ekraani suuruste vahel ühtlaste vahekauguste loomine

Veebilehe eri suurustes ühesuguseks muutmine võib olla keeruline, isegi kui kasutate dünaamilisi CSS-i ühikuid, nagu vw ja %. CSS calc() funktsioon muudab seda.

Nagu näete ülaltoodud pildil, on üle ekraani kulgeval tiitliribal sõltuvalt ekraani suurusest erinev vahe. Seda seetõttu, et oleme määranud laiuseks 80vw ja vahekauguseks 20vw; muutuv väärtus.

Kui kasutame selle asemel calc(), saame määrata vahekauguse mis tahes ekraanisuuruses ühesuguseks. Vara, mida selleks kasutame, näeb välja selline:

laius: arvutuslik (100vw - 400px);

See seab meie tiitliriba laiuseks 400 pikslit väiksemaks kui lehe laius, luues ühtlased vahed olenemata kuva suurusest.

CSS max() matemaatiline funktsioon

Funktsioon CSS max() valib CSS-i atribuudile väärtuse lisamiseks basseinist kõrgeima väärtuse. Saate lisada nii palju potentsiaalseid väärtusi kui soovite, eraldades igaüks neist komadega, kuid see kasutab ainult suurimat väärtust.

Näide: Navigeerimisriba kõrguse piiramine

Üks peamisi väljakutseid, mis tundliku veebidisainiga kaasneb, on orienteerumine. Suurel portreearvuti monitoril töötav sait peab hea välja nägema ka väiksemal portree-mobiiliekraanil.

See võib muuta kinnisvara väärtuse lauaarvutis suurepäraseks ja mobiilis halvaks, nagu ülaltoodud pildil näha. Meie navigeerimisriba kõrgus on 10 vh, kuid see muudab riba lauaarvutites õhukeseks.

Selle probleemi lahendamiseks saame kasutada funktsiooni CSS max().

kõrgus: max (10vh, 80px);

Sellise reegli lisamisega saame seada oma navigeerimisriba minimaalseks kõrguseks 80 pikslit, säilitades samal ajal väärtuse 10vh, kui see on suurem.

CSS min() matemaatiline funktsioon

Funktsioon min () on nagu funktsioon max (), kuid see valib atribuudi väärtuseks kasutamiseks kogumi madalaima väärtuse.

Näide: teksti maksimaalse suuruse määramine

Olenemata sellest, kas kasutate dünaamilist väärtust või mitte, teksti suuruse muutmine erinevatel platvormidel võib olla keeruline. Saame kasutada funktsiooni CSS min(), et määrata meie peamise päise teksti suuruse jaoks kaks või enam potentsiaalset atribuudi väärtust ja see kasutab kõige väiksemat.

Kasutades a fondi suurus: 10vh; atribuut meie näite peamise päise tekstil muudab teksti töölaual suurepäraseks, kuid mobiilseadmetes liiga suureks.

Selle muutmiseks saate alternatiivse suuruse pakkumiseks kasutada funktsiooni CSS min().

fondi suurus: min (10vh, 10vw);

See näide toimib, kuna mobiiliekraanid on kõrged ja õhukesed, lauaarvuti monitorid aga laiad ja lühikesed. See tähendab, et vaate laiuse (vw) seade on mobiilis väiksem kui lauaarvutis.

Matemaatika kasutamine tundliku veebidisaini jaoks

CSS-iga eelpakendatud matemaatilised funktsioonid pakuvad ainulaadset viisi tundlike veebisaitide hõlpsaks loomiseks. Alustamiseks peate need lihtsalt õigesti seadistama.

Muidugi on ka teisi meetodeid ja CSS-i funktsioone, mida saate kasutada saidi loomiseks, mis näeb hea välja erinevatel platvormidel.

HTML-i ja CSS-i abil tundliku navigeerimisriba loomine

Loe edasi

Autori kohta