Web programiranje → HTML, CSS i JavaScript → CSS: responzivni dizajn za telefon i računar

CSS: responzivni dizajn za telefon i računar

Korak 1: viewport

Bez ovog reda telefon prikazuje stranicu kao da je ekran širok 980px i sve smanji – tekst postaje sitan:

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

On mora biti u head svake stranice.

Korak 2: fleksibilne veličine

Korak 3: media upiti

Media upit je skup CSS pravila koja važe samo pod nekim uslovom, najčešće za određenu širinu ekrana:

<style>
  .kolone { display: flex; flex-direction: column; gap: 8px; }   /* telefon: jedna kolona */
  .kolone div { background: #eef6fc; padding: 14px; border-radius: 8px; }
  .poruka::after { content: "uzak ekran (telefon)"; }

  @media (min-width: 600px) {          /* važi kada je širina 600px ili više */
    .kolone { flex-direction: row; }   /* tablet i računar: kolone u redu */
    .kolone div { flex: 1; }
    .poruka::after { content: "širok ekran (≥ 600px)"; }
  }
</style>
<p class="poruka">Sada je: </p>
<div class="kolone">
  <div>Prva kolona</div>
  <div>Druga kolona</div>
  <div>Treća kolona</div>
</div>

Rezultat:

Okvir sa rezultatom je uži od 600px na telefonu, a širi na računaru – otvori ovu stranu na oba uređaja ili suzi prozor. U F12 postoji dugme Toggle device toolbar (Ctrl+Shift+M) koje prikazuje stranicu kao na izabranom telefonu.

Granice nisu zakon – stavljaju se tamo gde se raspored „pokvari“ dok sužavaš prozor.

Prvo telefon (mobile first)

Preporučen način pisanja: osnovna pravila su za telefon (jednostavno, jedna kolona), a @media (min-width: ...) dodaje složeniji raspored za veće ekrane. Tako je CSS kraći, a stranica na telefonu brža.

/* osnovno: telefon */
.stranica { display: grid; gap: 12px; }
nav ul { display: flex; flex-direction: column; }

/* tablet i veće */
@media (min-width: 700px) {
  nav ul { flex-direction: row; gap: 16px; }
}

/* računar */
@media (min-width: 1024px) {
  .stranica { grid-template-columns: 220px 1fr; }   /* meni levo, sadržaj desno */
}

Još nekoliko pravila za prijatan sajt

• Dugmad i linkovi za prst – bar 44×44px; mali linkovi jedan do drugog teško se pogađaju.
• Dužina reda teksta – 60–80 znakova se najlakše čita: main { max-width: 70ch; }.
• Tamna tema – @media (prefers-color-scheme: dark) { ... } poštuje podešavanje uređaja.
• Široke tabele – stavi ih u div sa overflow-x: auto da se pomeraju vodoravno umesto da kvare stranicu.

Gotove biblioteke kao što je Bootstrap imaju spremne klase za responzivnu mrežu i komponente. Koriste se u projektu Logo kreator, ali je važno da prvo razumeš kako sve to radi sa običnim CSS-om.

Zadaci za vežbu

Za svaki zadatak postoji primer, uputstvo i rešenje. Rešenja su provereno ispravna u pregledaču.

Proveri znanje