Stăpânirea designului web receptiv cu funcții matematice CSS

Matematica este bună, matematica este grozavă, dar vrei să-ți petreci timpul făcând calcule atunci când foaia ta de stil o poate face pentru tine?

CSS vine cu trei funcții matematice utile care vor schimba modul în care vă proiectați site-urile web. Vă vom arăta cum și de ce ar trebui să le utilizați.

Introducerea matematicii în CSS

CSS este în principal declarativ, dar revizuirile au introdus funcții în limbaj. Acum există multe funcții în specificații, iar trei dintre cele mai simple matematice se pot dovedi foarte utile: calc, max și min.

Poți să folosești acest exemplu simplu de CodePen pentru a ajuta la urmarirea ghidului.

CSS calc() Funcție matematică

Funcția CSS calc() efectuează un calcul simplu și folosește rezultatul ca valoare de proprietate. Aceasta înseamnă că puteți atribui valori dinamice proprietăților precum înălțimea și lățimea, toate fără CSS @interogări media.

Această funcție acceptă adunarea (+), înmulțirea (*), scăderea (-) și împărțirea (/) cu un singur operator.

Exemplu: crearea unei spații uniforme între dimensiunile ecranului

A face ca o pagină web să arate la fel la diferite dimensiuni poate fi dificil, chiar dacă utilizați unități CSS dinamice precum vw și %. Funcția CSS calc() modifică acest lucru.

După cum puteți vedea în imaginea de mai sus, bara de titlu care trece pe ecran are spații diferite în funcție de dimensiunea ecranului. Acest lucru se datorează faptului că am setat lățimea la 80vw, setând distanța la 20vw; o valoare variabilă.

Dacă folosim calc() în schimb, putem seta distanța să fie aceeași pe orice dimensiune a ecranului. Proprietatea pe care o folosim pentru aceasta arată astfel:

latime: calc (100vw - 400px);

Aceasta setează lățimea barei de titlu la 400 px mai mică decât lățimea paginii, creând spațiere uniformă, indiferent de dimensiunea afișajului.

CSS max() Funcție matematică

Funcția CSS max() selectează cea mai mare valoare dintr-un pool pentru a adăuga o valoare unei proprietăți CSS. Puteți adăuga oricâte valori potențiale doriți, fiecare separând prin virgulă, dar va folosi doar cea mai mare.

Exemplu: restricționarea înălțimii barei de navigare

Una dintre provocările cheie care vin cu designul web receptiv este orientarea. Un site care funcționează pe un monitor mare de computer portret trebuie să arate bine și pe un ecran mobil portret mai mic.

Acest lucru poate face ca valoarea unei proprietăți să arate grozav pe desktop și prost pe mobil, așa cum arată imaginea de mai sus. Bara noastră de navigare are o înălțime setată de 10vh, dar acest lucru face ca bara să pară subțire pe dispozitivele desktop.

Putem folosi funcția CSS max() pentru a rezolva această problemă:

înălțime: max (10vh, 80px);

Adăugând o regulă ca aceasta, putem seta o înălțime minimă de 80px pentru bara noastră de navigare, menținând în același timp valoarea de 10vh dacă este mai mare.

CSS min() Funcție matematică

Funcția min() este ca și funcția max(), dar alege cea mai mică valoare dintr-un pool pentru a o utiliza ca valoare a proprietății.

Exemplu: setarea unei dimensiuni maxime de text

Indiferent dacă utilizați o valoare dinamică sau nu, obținerea dimensiunii textului pe platforme poate fi complicat. Putem folosi funcția CSS min() pentru a seta două sau mai multe valori potențiale de proprietate pentru dimensiunea textului principal al antetului și o va folosi pe cea mai mică.

Folosind un dimensiunea fontului: 10vh; proprietatea de pe textul antetului principal din exemplul nostru face ca textul să arate grozav pe desktop, dar mult prea mare pe dispozitivele mobile.

Pentru a schimba acest lucru, puteți utiliza funcția CSS min() pentru a oferi o dimensiune alternativă:

dimensiunea fontului: min (10vh, 10vw);

Acest exemplu funcționează deoarece ecranele mobile sunt înalte și subțiri, în timp ce monitoarele desktop sunt late și scurte. Aceasta înseamnă că unitatea de lățime de vizualizare (vw) este mai mică pe mobil decât pe desktop.

Utilizarea matematicii pentru design web receptiv

Funcțiile matematice care sunt pre-ambalate cu CSS oferă o modalitate unică de a produce site-uri web receptive cu ușurință. Trebuie doar să le configurați corect pentru a începe.

Desigur, există și alte metode și funcții CSS pe care le puteți folosi pentru a crea un site care să arate grozav pe toate platformele.

Cum să construiți o bară de navigare receptivă folosind HTML și CSS

Citiți în continuare

Despre autor