Font-size cu adevărat responsive (și marfă!)

Folosire viewport font size

Cred ca în Iunie 2017 este toată lumea de acord că versiunea mobilă a unui site este vitală. Nici nu înțeleg rostul propoziției anterioare. În fine, aveam nevoie de o scurtă introducere, ceva de umplutură.

Ideea este că schimbând rezoluțiile de la device la device în browser, automat trebuie să ajungi la o mărime a fontului optimă, care să asigure o lizibilitate bună a textului. Mai ales dacă vorbim de afișarea pe mobil. Până de curând (adică foarte, foarte, foarte recent) foloseam font-size declarați în pixeli la diferite break-pointuri ale siteului. Până am găsit citit cât de ușor și practic este să folosești fluid typography. Nu am stat să citesc foarte mult teoria, era și o paralelă cu printul tradițional, dar am trecut rapid peste.

Ce este, de fapt? Procedeul seamănă ca atunci când declari dimensiunile anumitor clase sau iduri de div în procente și nu în pixeli. DAR! Există un catch! Viewportul (unitatea de măsură despre care vom vorbi) se raportează la tot spațiul în care este conținută informația, în timp ce atunci când declarăm dimensiuni în procente, ne raportăm la la containerul în care lucrăm.

Ce avem ca viewport?

  • vw:  lăţime viewport
  • vh:  înălțime viewport
  • vmin: cea mai mică valoare a viewportului (lăţime și înălțime)
  • vmax: cea mai mare valoare a viewportului (lăţime și înălțime)

Important este de știut că 1vw = 1% din lățimea viewportului.

Cum folosim? 
h1 { font-size: 5.9vw; }

.clasa { font-size: 3.0vh; }

p { font-size: 2vmin; }

Sau putem folosi ca element root:

html { font-size: 2vw; }, după care să folosim:
h1 { font-size: 3em; }, em fiind o unitate de măsură bazată pe valoarea root. Prin ceea ce am declarat anterior h1 va avea mărimea 6vw.

Sau dacă vrei ceva cu adevărat dinamic:

html { font-size: calc(1em + 1vw); }

Iar în final, pentru că poate nu m-am exprimat extraordinar sau poate pentru că doriți să vedeți ceva practic, voila!

Sursă foto și material

Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *

Acest site folosește Akismet pentru a reduce spamul. Află cum sunt procesate datele comentariilor tale.