Što je responzivni dizajn?
Responzivni dizajn omogućava web stranicama da se prilagode različitim veličinama ekrana i uređajima. Cilj je pružiti optimalno korisničko iskustvo bez obzira na to koristi li se desktop, tablet ili mobilni uređaj.
Meta Viewport
Meta oznaka <meta name="viewport"> koristi se za kontrolu kako se sadržaj prikazuje na mobilnim uređajima. Primjer osnovne postavke je:
<meta name="viewport" content="width=device-width, initial-scale=1.0">Ova postavka osigurava da širina web stranice odgovara širini uređaja, a početni zoom postavljen je na 1.
Mjerne jedinice
U responzivnom dizajnu često se koriste relativne mjerne jedinice poput:
- %: Procentualna širina ili visina u odnosu na roditeljski element.
- em: Relativna veličina u odnosu na veličinu fonta roditelja.
- rem: Relativna veličina u odnosu na osnovnu veličinu fonta korijenskog elementa (
html). - vh, vw: Visina i širina prikaza (viewport height i viewport width).
Media Queries
Media queries su tehnika u CSS-u koja omogućuje primjenu različitih stilova ovisno o karakteristikama uređaja na kojem se prikazuje web stranica. Ovo je ključno za responzivni dizajn jer omogućuje da stranica bude prilagođena različitim veličinama ekrana, rezolucijama i orijentacijama uređaja.
Primjer sintakse:
@media (max-width: 600px) { body { background-color: lightblue; } }