Responzivan dizajn

Uvod

Razlikujemo 4 vrste responzivnosti:

  • Fixed Layout: Web stranice nisu pogodne za male ekrane jer su dimenzije fiksirane. Na manjim uređajima, korisnici moraju pomicati stranicu horizontalno da bi vidjeli cijeli sadržaj.
  • Fluid Layout: Elementi zauzimaju fluidnu širinu (%), što omogućava bolje prilagođavanje na različitim veličinama ekrana. Ovaj pristup koristi postotke za određivanje širina i visina.
  • Adaptive Layout: Web stranice se prilagođavaju različitim uređajima pomoću media queries. Ovaj pristup koristi različite CSS stilove za različite veličine ekrana, čineći web stranicu funkcionalnom na mnogim uređajima.
  • Responsive Layout: Kombinacija fluidnog rasporeda i CSS media queries. Stranica se može prilagoditi različitim uređajima i dimenzijama ekrana uz pomoć fleksibilnih širina i naprednih stilova za određene veličine ekrana.

Za pravi responzivan dizajn, potrebno je kombinirati ove tehnike kako bi web stranica bila korisna na svim uređajima.

Meta Viewport

Meta Viewport je ključna oznaka responzivnog dizajna. Omogućava kontrolu dimenzija i skaliranja stranice na različitim uređajima. Uz ovu oznaku, sadržaj se može automatski prilagoditi veličinu zaslona korisnika.

Ova oznaka osigurava da se sadržaj stranice automatski prilagodit veličini zaslona uređaja i sprječava nepotrebno zumiranje. Važno je uključiti ovu oznaku u <head> sekciju HTML dokumenta.

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

Jedinice mjere u responzivnom dizajnu

Uobičajene širine zaslona

  • 320px: Mobilni uređaji. Ovo je tipična širina za starije modele pametnih telefona.
  • 480px: Manji mobilni uređaji. Također se može odnositi na uređaje kao što su manji telefoni ili uređaji sa 4-inčnim ekranima.
  • 768px: Tableti. Tableti imaju ovu širinu, čineći ih odličnim za prilagodbu stranica.
  • 1024px: Prijenosna računala. Ovo je standardna širina za većinu prijenosnih računala.
  • 1200px+: Stolna računala. Veći uređaji sa širokim ekranima, gdje dizajn može imati više prostora za raspored sadržaja.

Fiksne vs. Varijabilne jedinice

Fiksne jedinice: px, mm, cm, in

Fiksne jedinice koriste se kada želite točnu i preciznu kontrolu nad dimenzijama elemenata na stranici, ali one nisu fleksibilne i ne skaliraju se s promjenom veličine zaslona.

Varijabilne jedinice: %, em, rem, vw, vh

Varijabilne jedinice koriste se kada želite da vaši elementi reagiraju na veličinu ekrana i mogu se prilagoditi ovisno o dimenzijama zaslona. Na primjer, vw (viewport width) i vh (viewport height) označava postotak širine trenutnog prozora preglednika, dok em i rem ovise o veličini fonta.

Za responzivni dizajn, varijabilne jedinice su vrlo korisne jer omogućuju prilagodbu elemenata na temelju promjenjivih dimenzija zaslona.

Media Query

Media Queries je CSS tehnika koja omogućuje primjenu stilova na elemente samo ako je ispunjen određeni uvjet.

@media screen and (min-width: 600px) {
/* Stilovi za uređaje šire od 600 piksela */
}

Razlikujemo 5 vrsta media queries:

  • All: Stilovi se primjenjuju na sve uređaju.
  • Screen: Stilovi se primjenjuju na uređaje sa ekranom, poput računala, tableta i pametnih telefona.
  • Handheld: Stilovi se primjenjuju na prenosive uređaje koji uglavnom imaju male ekrane.
  • Print: Stilovi se primjenjuju na dokumente koji se ispisuju.
  • TV: Stilovi se primjenjuju na televizore.

Media queries možemo pozvati na tri načina:

  • HTML
  • CSS (import)
  • CSS (@media)

Primjeri

Primjer 1: Responzivni dizajn s flexbox tehnikom

.container {
display: flex;
flex-wrap: wrap;
}

.item {
flex: 1 1 100%;
}

@media screen and (min-width: 768px) {
.item {
flex: 1 1 48%;
}
}

Primjer 2: Korištenje varijabilnih jedinica za fluidni dizajn

body {
font-size: 16px;
}

.container {
width: 580%;
}

header {
height: 10vh;
}

Primjer 3: Responzivni dizajn s CSS Grid

header {
display: grid;
grid-template-columns: 1fr;
}

@media screen and (min-height: 768px) {
.grid-container {
grid-template-columns: 1fr 1fr;
}
}

Ovi primjeri pokazuju kako možete koristiti različite CSS tehnike za stvaranje responzivnih i fleksibilnih rasporeda koji se prilagođavaju veličini zaslona uređaja.