Obvladovanje odzivnega spletnega oblikovanja z matematičnimi funkcijami CSS

Matematika je dobra, matematika je odlična, toda ali želite porabiti svoj čas za izračune, ko vam lahko to naredi vaš slogovni list?

CSS ima tri priročne matematične funkcije, ki bodo spremenile način oblikovanja vaših spletnih mest. Pokazali vam bomo, kako in zakaj bi jih morali uporabiti.

Predstavitev matematike v CSS

CSS je večinoma deklarativen, vendar so revizije jeziku uvedle funkcije. Zdaj je v specifikaciji veliko funkcij in tri najpreprostejše matematične se lahko izkažejo za zelo uporabne: calc, max in min.

Lahko uporabiš ta preprost primer CodePen pomagati slediti vodniku.

Matematična funkcija CSS calc().

Funkcija CSS calc() izvede preprost izračun in uporabi rezultat kot vrednost lastnosti. To pomeni, da lahko lastnostim, kot sta višina in širina, dodelite dinamične vrednosti, vse brez CSS @media poizvedbe.

Ta funkcija podpira seštevanje (+), množenje (*), odštevanje (-) in deljenje (/) z enim samim operatorjem.

Primer: ustvarjanje enakomernega razmika med velikostmi zaslona

Zagotoviti, da je spletna stran videti enako pri različnih velikostih, je lahko težavna, tudi če uporabljate dinamične enote CSS, kot sta vw in %. Funkcija CSS calc() to spremeni.

Kot lahko vidite na zgornji sliki, ima naslovna vrstica, ki poteka čez zaslon, različen razmik, odvisno od velikosti zaslona. To je zato, ker smo širino nastavili na 80vw, razmik pa na 20vw; spremenljivka vrednost.

Če namesto tega uporabimo calc(), lahko nastavimo enak razmik na kateri koli velikosti zaslona. Lastnost, ki jo uporabljamo za to, izgleda takole:

širina: izračun (100vw - 400px);

To nastavi širino naše naslovne vrstice na 400 slikovnih pik manj od širine strani, kar ustvarja enakomeren razmik ne glede na velikost zaslona.

CSS max() Math Funkcija

Funkcija CSS max() izbere najvišjo vrednost iz skupine, da doda vrednost lastnosti CSS. Dodate lahko toliko potencialnih vrednosti, kot želite, pri čemer je vsaka ločena z vejico, vendar bo uporabljena samo najvišja.

Primer: Omejitev višine navigacijske vrstice

Eden ključnih izzivov, ki jih prinaša odzivno spletno oblikovanje, je orientacija. Spletno mesto, ki deluje na velikem pokončnem računalniškem monitorju, mora biti dobro videti tudi na manjšem pokončnem mobilnem zaslonu.

Zaradi tega je lahko vrednost lastnosti videti odlično na namizju in slabo v mobilnih napravah, tako kot prikazuje zgornja slika. Naša navigacijska vrstica ima nastavljeno višino 10vh, vendar je zaradi tega vrstica na namiznih napravah videti tanka.

Za rešitev te težave lahko uporabimo funkcijo CSS max():

višina: max (10vh, 80px);

Z dodajanjem takšnega pravila lahko nastavimo minimalno višino 80px za našo navigacijsko vrstico, medtem ko ohranimo vrednost 10vh, če je višja.

CSS min() Math Funkcija

Funkcija min() je podobna funkciji max(), vendar izbere najnižjo vrednost iz skupine za uporabo kot vrednost lastnosti.

Primer: nastavitev največje velikosti besedila

Ne glede na to, ali uporabljate dinamično vrednost ali ne, pridobivanje velikosti besedila na različnih platformah je lahko težavno. S funkcijo CSS min() lahko nastavimo dve ali več potencialnih vrednosti lastnosti za velikost besedila naše glavne glave, pri čemer bo uporabila najmanjšo.

Z uporabo a velikost pisave: 10vh; lastnost glavnega besedila glave v našem primeru naredi besedilo videti odlično na namizju, a veliko preveliko na mobilnih napravah.

Če želite to spremeniti, lahko uporabite funkcijo CSS min(), da zagotovite alternativno velikost:

velikost pisave: min (10vh, 10vw);

Ta primer deluje, ker so mobilni zasloni visoki in tanki, medtem ko so namizni monitorji široki in kratki. To pomeni, da je enota za širino pogleda (vw) manjša v mobilnih napravah kot na namizju.

Uporaba matematike za odzivno spletno oblikovanje

Matematične funkcije, ki so predpakirane s CSS, ponujajo edinstven način za enostavno izdelavo odzivnih spletnih mest. Za začetek jih morate le pravilno nastaviti.

Seveda obstajajo tudi druge metode in funkcije CSS, ki jih lahko uporabite za izdelavo spletnega mesta, ki izgleda odlično na različnih platformah.

Kako zgraditi odzivno navigacijsko vrstico z uporabo HTML in CSS

Preberite Naprej

O avtorju