Capitolul 5: Responsive DesignCe înseamnă „Responsive Design”
Paginile noastre vor fi accesate pe diverse dispozitive.
Uneori pe telefon, pe tabletă, alteori pe un ecran mai mare de laptop sau desktop.
Se poate întâmpla ca să fie nevoie să tragem pagina la imprimantă, iar trucurile pe care le-am folosit pentru ecrane nu se traduc la fel de bine pe hârtie.
Responsive Design înseamnă să construim o singură pagină HTML, și cu trucuri în CSS să putem să afișăm acea pagină în orice context.
Înainte de orice...
Pentru că telefoanele mobile raportează ciudat mărimea reală a ecranului, trebuie să punem în orice pagină următorul meta tag:
<meta name="viewport" content="width=device-width,initial-scale=1" />
DPR
Dimensiunile la care avem acces pe ecranele telefoanelor mobile nu reprezintă rezoluția reală a ecranului.
Un ecran de telefon poate avea rezoluția reală 1080x1920, dar numărul de pixeli pe care îi putem folosi sunt de fapt 360x640. Asta pentru că mai intervine și Display Pixel Ratio (DPR).
Browserul mobil te lasă să folosești acele valori mai mici, și le scalează inteligent, în funcție de DPR. De exemplu, un colț rotunjit de 10px la DPR=2 va fi afișat ca un colț de 20px.