Ovladavanje responzivnim web dizajnom s CSS matematičkim funkcijama

Matematika je dobra, matematika je sjajna, ali želite li trošiti svoje vrijeme na izračune kada to vaš stilski list može učiniti umjesto vas?

CSS dolazi s tri zgodne matematičke funkcije koje će promijeniti način na koji dizajnirate svoje web stranice. Pokazat ćemo vam kako i zašto ih trebate koristiti.

Uvođenje matematike u CSS

CSS je uglavnom deklarativni, ali revizije su uvele funkcije u jezik. Sada postoji mnogo funkcija u specifikaciji, a tri najjednostavnije matematičke mogu se pokazati vrlo korisnima: calc, max i min.

Možeš koristiti ovaj jednostavan primjer CodePen-a za pomoć u praćenju zajedno s vodičem.

CSS calc() Matematička funkcija

Funkcija CSS calc() izvodi jednostavan izračun i koristi rezultat kao vrijednost svojstva. To znači da možete dodijeliti dinamičke vrijednosti svojstvima kao što su visina i širina, sve bez CSS @media upiti.

Ova funkcija podržava zbrajanje (+), množenje (*), oduzimanje (-) i dijeljenje (/) s jednim operatorom.

Primjer: Stvaranje ravnomjernog razmaka po veličinama zaslona

Može biti teško učiniti da web stranica izgleda isto u različitim veličinama, čak i ako koristite dinamičke CSS jedinice kao što su vw i %. Funkcija CSS calc() to mijenja.

Kao što možete vidjeti na gornjoj slici, naslovna traka koja ide preko zaslona ima različit razmak ovisno o veličini zaslona. To je zato što smo postavili širinu na 80vw, postavljajući razmak na 20vw; varijabilnu vrijednost.

Ako umjesto toga koristimo calc(), možemo postaviti da razmak bude isti na bilo kojoj veličini zaslona. Svojstvo koje koristimo za to izgleda ovako:

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

Ovo postavlja širinu naše naslovne trake na 400px manje od širine stranice, stvarajući ravnomjeran razmak bez obzira na veličinu zaslona.

CSS max() Matematička funkcija

Funkcija CSS max() odabire najvišu vrijednost iz skupa kako bi dodala vrijednost CSS svojstvu. Možete dodati onoliko potencijalnih vrijednosti koliko želite, a svaku od njih odvojite zarezom, ali koristit će se samo najveća.

Primjer: Ograničavanje visine navigacijske trake

Jedan od ključnih izazova s ​​responzivnim web dizajnom je orijentacija. Stranica koja radi na velikom portretnom monitoru računala također mora izgledati dobro na manjem portretnom mobilnom zaslonu.

Ovo može učiniti da vrijednost svojstva izgleda sjajno na stolnom računalu i loše na mobilnom uređaju, baš kao što prikazuje gornja slika. Naša navigacijska traka ima postavljenu visinu od 10vh, ali zbog toga traka izgleda tanka na stolnim uređajima.

Možemo koristiti CSS max() funkciju da riješimo ovaj problem:

visina: max (10vh, 80px);

Dodavanjem ovakvog pravila možemo postaviti minimalnu visinu od 80px za našu navigacijsku traku, uz zadržavanje vrijednosti od 10vh ako je veća.

CSS min() Matematička funkcija

Funkcija min() je kao funkcija max(), ali bira najnižu vrijednost iz skupa za korištenje kao vrijednost svojstva.

Primjer: Postavljanje maksimalne veličine teksta

Bez obzira koristite li dinamičku vrijednost ili ne, dobivanje veličine teksta na svim platformama može biti nezgodno. Možemo koristiti CSS min() funkciju za postavljanje dvije ili više potencijalnih vrijednosti svojstava za veličinu teksta našeg glavnog zaglavlja, a ona će koristiti najmanju.

Korištenje a veličina fonta: 10vh; svojstvo glavnog teksta zaglavlja u našem primjeru čini da tekst izgleda sjajno na stolnoj površini, ali prevelik na mobilnim uređajima.

Da biste to promijenili, možete upotrijebiti funkciju CSS min() za pružanje alternativne veličine:

veličina fonta: min (10vh, 10vw);

Ovaj primjer funkcionira jer su mobilni zasloni visoki i tanki, dok su stolni monitori široki i kratki. To znači da je jedinica širine prikaza (vw) manja na mobilnom uređaju nego na stolnom računalu.

Korištenje matematike za responzivni web dizajn

Matematičke funkcije koje dolaze unaprijed zapakirane s CSS-om nude jedinstven način za laku izradu responzivnih web stranica. Samo ih trebate ispravno postaviti da biste započeli.

Naravno, postoje i druge metode i CSS funkcije koje možete koristiti za izradu web stranice koja izgleda sjajno na svim platformama.

Kako izgraditi responzivnu navigacijsku traku koristeći HTML i CSS

Pročitajte dalje

O autoru