1. Evolucija weba
Nekada su se web stranice na mobilnim uređajima prikazivale kao umanjene verzije desktop stranica ili su postojale zasebne mobilne verzije (npr. m.stranica.com). Danas se koristi responzivni web dizajn kako bi se izbjeglo održavanje više verzija iste stranice.
Fiksni raspored koristi točno određene širine (npr. 960px) i ne prilagođava se veličini ekrana. Fluidni raspored koristi postotke i fleksibilne mjere, pa se elementi automatski prilagođavaju pri smanjivanju ekrana.
Responsive web design (Responzivni web dizajn) predstavlja pristup gdje se kombinacijom fluidnog rasporeda i CSS media queries postiže najveća kontrola izgleda i ponašanja web stranice na različitim uređajima.
2. Tehnička postavka
Viewport je vidljivo područje web stranice na uređaju. Na mobilnim uređajima je manji jer su ekrani fizički manji nego na računalima.
Neophodna HTML linija koda:
meta name="viewport" content="width=device-width, initial-scale=1.0">
Naredba initial-scale=1.0 određuje početnu razinu zumiranja stranice kada se ona učita.
3. Breakpointi
| Širina | Uređaj |
|---|---|
| 320px | Mali mobilni telefoni |
| 480px | Veći mobilni telefoni |
| 768px | Tableti |
| 1200px | Desktop i veći zasloni |
4. Mjerne jedinice
Fiksne mjere: px, cm, mm
Varijabilne mjere: %, em, rem, vw, vh
Fiksne Mjere: Koriste se kada je potrebna precizna kontrola elemenata. Varijabilne Mjere: Koriste se za responzivnost i prilagodljivost različitim veličinama ekrana.