Responzivni Web Dizajn

Prilagodljivi pristup za sve uređaje

Trenutna širina: ---px

Evolucija Weba

Moderni web dizajn koristi prilagodljivi pristup koji kombinira elastični sustav raspoređivanja i CSS medijske upite.

Viewport Postava

Ključna meta oznaka:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Elastično vs Statično

Statično: Apsolutne dimenzije, nepromjenjiv prikaz

Elastično: Proporcionalne mjere, automatska prilagodba

Prijelomne Točke

Apsolutne Jedinice

Koriste se za eksaktne dimenzije: px, cm, mm, pt

Relativne Jedinice

Koriste se za prilagodljivi dizajn: %, em, rem, vw, vh

Mobile First

Pristup koji započinje dizajnom za najmanje uređaje i postupno dodaje funkcionalnosti za veće ekrane.

Primjer Apsolutne Jedinice

200px širine

Primjer Relativne Jedinice

100% širine