Responsive dizajn

Lekcija 09 — Responsive dizajn sa Media Queries (CSS)

Uvod

Na današnjim sajtovima korisnici pristupaju sa raznih uređaja — desktop računara, laptopova, tableta, mobilnih telefona. Da bi sajt izgledao i funkcionisao lepo na svim tim uređajima, neophodno je da dizajn bude „responsivan“ — da se automatski prilagođava veličini ekrana. Ovu prilagodljivost omogućava tehika koju zovemo Media Queries. MDN Web Docs+2GeeksforGeeks+2

Media Queries omogućavaju da napišeš posebna CSS pravila koja će se primenjivati samo pod određenim uslovima — na primer, ako je širina ekrana manja od 768px (mobilni), ili između 768px i 1024px (tablet), i slično. GeeksforGeeks+2djamware.com+2

Šta je Media Query — osnove i sintaksa

Media query je deo CSS-a koji kaže: “Ako je ispunjen ovaj uslov (npr. širina ekrana), primeni ove stilove.” Sintaksa tipične media query-deklaracije izgleda ovako:

@media screen and (max-width: 600px) { /* CSS pravila za male ekrane */ }

@media — CSS at-pravilo koje označava media query. GeeksforGeeks+2MDN Web Docs+2
screen — tip medijuma (ekran). Možeš koristiti i all, print i drugi — ili preskočiti tip (onda važi za “sve medijume”). ReDI Projects+1
(max-width: 600px) — uslov („feature query“): u ovom primeru — maksimalna širina ekrana 600px. Stylovi unutar bloka važe samo ako je uslov ispunjen. GeeksforGeeks+1

Možeš kombinovati više uslova, npr:

@media only screen and (min-width: 768px) and (max-width: 1024px) { /* CSS za ekrane između 768px i 1024px širine */ }

Takođe, moguće je ciljati specifične situacije — orijentaciju (portrait / landscape), rezoluciju, uređaj, print i drugo. djamware.com+1

Zašto koristiti Media Queries: Responsive dizajn i fleksibilnost

Glavne prednosti Media Queries:

Stranica se prilagođava različitim veličinama ekrana — mobilni, tablet, desktop. Korisničko iskustvo je bolje. GeeksforGeeks+2GeeksforGeeks+2
Možeš menjati raspored elemenata, širinu, visinu, font-veličine, padding/margine… zavisno od veličine ekrana. MDN Web Docs+1
Takođe možeš prilagođavati stilove za specifične medijume – npr. za štampu (print), veliki ekran, ekran sa dodirom i sl. MDN Web Docs+1

Media Queries su temelj moderne prakse odgovornog (responsive) web dizajna. MDN Web Docs+1

Primer: Osnovna struktura sa Media Queries

Pretpostavimo da imaš jednostavnu HTML stranicu — i želiš da se na mobilnom ekranu elementi ređaju jedan ispod drugog, a na desktopu stoje u koloni/kontejneru pored. Evo primera:


<!DOCTYPE html>
<html lang="sr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Media Query Primer</title>
  <style>
    .container {
      display: flex;
      flex-direction: column; /* za mobilno — elementi vertikalno */
    }

    /* Kada je širina ekrana 768px ili više — stavimo horizontalni raspored */
    @media screen and (min-width: 768px) {
      .container {
        flex-direction: row;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
  </div>
</body>
</html>

Na mobilnom (manjem od 768px) .container je kolona — elementi jedan ispod drugog.
Na širem ekranu (desktop, tablet) raspored postaje horizontalan — elementi stoje u redu.

Ovo je vrlo jednostavan, ali praktičan primer responsive rasporeda koristeći Media Queries + fleksiranje (flexbox).

Osnovna podela “breakpoint-a” i mobile-first pristup

Jedan od dobrih pristupa je mobile-first: prvo pišeš stilove za mobilne (najmanje) ekrane kao osnovne, a potom dodatne media query-e za veće ekrane.

Primer:

/* Mobile-first — osnovni stilovi */

body {
  font-size: 16px;
}

/* Tablet / srednji ekrani */
@media screen and (min-width: 600px) {
  body {
    font-size: 18px;
  }
}

/* Desktop / veliki ekrani */
@media screen and (min-width: 992px) {
  body {
    font-size: 20px;
  }
}

Na ovaj način osiguravaš da sajt lepo radi na najmanjim uređajima, a stilske prilagođavanja dodaješ za veće ekrane. GeeksforGeeks+2ReDI Projects+2

Kada je dobro koristiti Media Queries — tipične situacije

Media Queries su korisne kada treba:

da promeniš raspored elemenata u zavisnosti od ekrana (npr. kolone → redovi, sakrivanje / prikazivanje elemenata)
da prilagodiš veličine (font, padding, margin, slike) za manje ili veće ekrane
da sakriješ ili prikažeš određene elemente (meni, sidebar, footer…) na mobilnim / desktop uređajima
da uradiš layout-e koji se lepo skaliraju (responsive grid-ovi, galerije, kartice, fleks rasporedi…)

Media Queries su praktično obavezni za svaki moderni, responsivan sajt.

Potpuni primer lekcije sa Media Queries — kod + objašnjenja

HTML + CSS: Responsive raspored sa 3 kolone → 1 kolona

<!DOCTYPE html>
<html lang="sr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Grid with Media Queries</title>
  <style>

    .grid {
      display: grid;
      grid-template-columns: 1fr; /* default: 1 kolona — mobilno */
      gap: 20px;
      padding: 10px;
    }

    .card {
      background: #e0e0e0;
      padding: 20px;
      border: 1px solid #333;
      text-align: center;
    }

    /* Tablet / manji laptop — 2 kolone */
    @media screen and (min-width: 600px) {
      .grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    /* Desktop i veći ekrani — 3 kolone */
    @media screen and (min-width: 992px) {
      .grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

  </style>
</head>
<body>

  <div class="grid">
    <div class="card">Kartica 1</div>
    <div class="card">Kartica 2</div>
    <div class="card">Kartica 3</div>
    <div class="card">Kartica 4</div>
    <div class="card">Kartica 5</div>
    <div class="card">Kartica 6</div>
  </div>

</body>
</html>

Objašnjenje

.grid { grid-template-columns: 1fr; } — podrazumevano za male ekrane — jedna kolona.
Kada je ekrana ≥ 600px — postaju dve kolone.
Kada je ekrana ≥ 992px — tri kolone.
Na ovaj način one iste kartice se dinamički raspoređuju u zavisnosti od širine ekrana — bez promene HTML-a.

Zaključak i savet za vežbu

Media Queries su osnova za responsivne web sajtove — omogućavaju da stilovi zavise od veličine ekrana i karakteristika uređaja. Kada se kombinuju sa fleksibilnim layout-ima (flexbox, grid), dobijaš sajt koji se lepo prilagođava — od mobilnog do desktopa.

Zadatak / vežba za tebe:
– Napravi stranicu sa listom članaka — da na mobilnom prikazuješ jedan članak po redu, na tabletu dve kolone, a na desktopu tri kolone.
– Dodatno: promeni veličinu fonta i padding-a u zavisnosti od širine ekrana (npr. manji font na mobilnom, veći na desktopu).