En aquest tema, explorarem el concepte de viewport i les unitats de mesura que s'utilitzen en el disseny responsive. Entendre com funcionen aquestes unitats és fonamental per crear dissenys que s'adaptin a diferents mides de pantalla.

El viewport és l'àrea visible d'una pàgina web en un dispositiu. És important perquè determina com es mostra el contingut en diferents dispositius, com ara telèfons mòbils, tauletes i ordinadors de sobretaula.

• Dimensions Variables: El viewport pot variar en mida depenent del dispositiu i de l'orientació (vertical o horitzontal).
• Escalabilitat: Els navegadors poden escalar el contingut per ajustar-lo al viewport.
• Meta Tag de Viewport: Permet als desenvolupadors controlar l'escala i les dimensions del viewport.

Exemple de meta tag de viewport en HTML:

Aquest meta tag indica al navegador que la pàgina ha de coincidir amb l'amplada del dispositiu i que l'escala inicial ha de ser 1.0.

Les unitats de mesura relacionades amb el viewport són essencials per crear dissenys flexibles i adaptatius. Les més comunes són:

• vw (viewport width): 1vw és igual a l'1% de l'amplada del viewport.
• vh (viewport height): 1vh és igual a l'1% de l'alçada del viewport.
• vmin: El menor valor entre vw i vh.
• vmax: El major valor entre vw i vh.

Suposem que volem crear un element que ocupi el 50% de l'amplada del viewport i el 30% de l'alçada. Podem utilitzar les unitats vw i vh per aconseguir-ho:

Aquest codi CSS assegura que l'element s'adapti a la mida del viewport, independentment del dispositiu.

Crea un banner que ocupi tota l'amplada del viewport i tingui una alçada de 20vh. Utilitza un color de fons de la teva elecció.

Solució:

Dissenya una targeta que tingui una amplada de 80vw i una alçada de 40vh. Afegeix un marge de 5vmin per assegurar que la targeta estigui centrada i tingui espai al voltant.

Solució:

• No oblidar el Meta Tag de Viewport: Sense aquest tag, el disseny pot no comportar-se com s'espera en dispositius mòbils.
• Ús Exagerat de vw i vh: Utilitzar aquestes unitats en excés pot fer que el disseny sigui massa dependent de la mida del viewport, perdent consistència en dispositius amb dimensions extremes.
• Prova en Diversos Dispositius: Assegura't de provar el teu disseny en diferents dispositius per garantir que es veu bé en tots ells.

Entendre el viewport i les unitats de mesura associades és crucial per al disseny responsive. Aquestes eines permeten crear dissenys que s'adapten dinàmicament a qualsevol mida de pantalla, millorant l'experiència de l'usuari. En el següent mòdul, explorarem tècniques avançades de CSS per millorar encara més els nostres dissenys responsius.