Invatare Atomica

Design Responsive

Progres lectie:
0%
🎯

Obiectivul lectiei

Vei intelege cum se construieste un site web care arata bine pe orice dispozitiv — telefon, tableta sau calculator — folosind media queries, unitati flexibile si Flexbox.

Dupa aceasta lectie vei putea:

  • Sa explici ce inseamna design responsive si de ce e necesar in 2026
  • Sa scrii media queries CSS pentru breakpoint-uri mobile, tableta si desktop
  • Sa folosesti unitati relative: %, vw, vh, em, rem in locul px fix
  • Sa creezi un layout flexibil cu Flexbox care se adapteaza la latime
  • Sa aplici abordarea Mobile First in proiectarea unui site
  • Sa identifici si sa corectezi erori comune in design-ul responsive

Incearca singur!

Provocare: Gandeste-te la cum se adapteaza un ziar digital

Pe ecranul unui laptop, un ziar online afiseaza 3 coloane de stiri. Pe telefon, afiseaza o singura coloana. Totusi exista un singur fisier HTML si CSS.

Cum crezi ca CSS-ul “stie” ce latime are ecranul vizitatorului? Ce mecanism permite schimbarea numarului de coloane automat?

💡 Indiciu — apasa pentru a vedea ▶

In CSS exista o regula speciala numita @media care permite aplicarea unor stiluri diferite in functie de latimea ferestrei browserului. Aceasta se numeste media query.

De exemplu: @media (max-width: 600px) { ... } — regulile din interior se aplica DOAR cand ecranul are cel mult 600 de pixeli latime.

1

1. Ce este design-ul responsive?

Design-ul responsive (Responsive Web Design — RWD) este tehnica prin care un site web se adapteaza automat la dimensiunea ecranului pe care este afisat: telefon mobil, tableta, laptop sau monitor wide.
😗

Site NON-responsive

Latimea fixa: 1200px. Pe telefon (375px) apare micsorat sau cu scroll orizontal. Textul e ilizibil fara zoom.

😇

Site Responsive

Layout flexibil. Pe telefon: 1 coloana, text mare. Pe desktop: 3 coloane, meniu orizontal. Acelasi cod HTML/CSS.

📊 Statistica 2026: Peste 60% din traficul web vine de pe dispozitive mobile. Un site non-responsive pierde mai mult de jumatate din vizitatori.

Meta-tag obligatoriu

Primul pas in orice pagina responsiva este aceasta linie in <head>:

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

Fara ea, browserul de pe telefon simuleaza un ecran de 980px si zoom-ueaza totul — site-ul apare miniatural.

Ce inseamna un site web responsive?
A Un site care isi adapteaza aspectul la dimensiunea ecranului
B Un site care raspunde la comenzi vocale
C Un site care se incarca rapid
D Un site care are animatii
2

2. Unitati relative vs. absolute

Un layout responsive evita unitatile absolute (px fix) si foloseste unitati relative care se adapteaza la context.

% — Procent

Relativ la elementul parinte. width: 50% = jumatate din parintele sau.

vw — Viewport Width

1vw = 1% din latimea ferestrei browserului. width: 100vw = toata latimea ecranului.

vh — Viewport Height

1vh = 1% din inaltimea ferestrei. height: 100vh = toata inaltimea ecranului.

rem — Root em

Relativ la font-size al elementului <html>. Implicit: 1rem = 16px. Recomandat pentru texte.

em — Element em

Relativ la font-size al elementului curent. Se compune daca e imbricat (evita pentru layout).

clamp(min, ideal, max)

Valoare fluida intre un minim si un maxim. Ex: clamp(1rem, 2.5vw, 1.5rem) pentru text responsive.

Exemplu: calcul unitati

Viewport = 1024px latime, font-size radacina = 16px:

/* 100vw = 1024px (intreaga latime) */
/* 50vw  = 512px */
/* 1rem  = 16px (font-size html implicit) */
/* 2rem  = 32px */
/* clamp(16px, 2.5vw, 24px) -> 2.5vw = 25.6px -> clamped la 24px */

/* Pe telefon 375px latime: */
/* clamp(16px, 2.5vw, 24px) -> 2.5vw = 9.4px -> clamped la 16px (min) */

Output verificat: la 1024px clamp returneaza 24px; la 375px returneaza 16px. Font-ul se adapteaza automat intre valorile min-max.

Care unitate CSS se calculeaza ca procent din latimea elementului parinte?
A px
B vw
C %
D em
3

3. Media Queries

Media query este o regula CSS care aplica stiluri conditionate de caracteristicile dispozitivului — de obicei latimea ecranului (width). Sintaxa: @media (conditie) { reguli-css }.

Breakpoint-uri standard (conventional 2026)

Nu exista standard oficial, dar aceste valori sunt cel mai des utilizate:

/* === BREAKPOINT-URI STANDARD === */

/* Mobile first: stiluri default (fara @media) se aplica pe telefon */
.container {
  width: 100%;
  padding: 1rem;
}

/* Tableta: ecrane >= 481px */
@media (min-width: 481px) {
  .container {
    padding: 1.5rem;
  }
}

/* Desktop mic: ecrane >= 769px */
@media (min-width: 769px) {
  .container {
    max-width: 960px;
    margin: 0 auto;
  }
}

/* Desktop mare: ecrane >= 1201px */
@media (min-width: 1201px) {
  .container {
    max-width: 1200px;
  }
}

min-width vs max-width: min-width = “de la latime in sus” (abordare Mobile First, recomandata). max-width = “pana la latime” (abordare Desktop First, mai veche).

Exemplu complet: meniu care se transforma
/* MOBIL (default): meniu vertical */
.nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* DESKTOP: meniu orizontal */
@media (min-width: 769px) {
  .nav {
    flex-direction: row;
    gap: 2rem;
  }
}

Pe telefon: elementele de meniu sunt stivuite vertical. Pe desktop: sunt aliniate orizontal. Acelasi HTML, CSS diferit per latime.

Ce face regula @media (max-width: 768px) { ... }?
A Aplica stilurile cand ecranul are MINIM 768px
B Ascunde elementele pe ecrane mici
C Aplica stilurile doar pe tableta
D Aplica stilurile cand ecranul are CEL MULT 768px
4

4. Flexbox pentru layout responsiv

Flexbox (Flexible Box Layout) este un model CSS care distribuie spatiul intre elemente pe un ax (orizontal sau vertical), adaptatandu-se automat la spatiul disponibil.

display: flex

Activeaza Flexbox pe container. Copiii devin flex items.

flex-wrap: wrap

Permite elementelor sa treaca pe randul urmator. Esential pentru responsive.

flex: 1

Elementul ocupa spatiu proportional disponibil. flex: 1 1 300px = creste, scade, dar incepe de la 300px.

gap

Spatiu intre elemente. gap: 1rem adauga spatiu uniform fara margini manuale.

Pattern clasic: grid de carduri responsive
/* Container: flex cu wrap */
.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

/* Card: latime minima 280px, creste sa umple spatiul */
.card {
  flex: 1 1 280px;
  background: #1a1a2e;
  border-radius: 12px;
  padding: 1.5rem;
}

/* Rezultat automat:
   Telefon (375px):   1 card pe rand (375 > 280, 375*2 < 280*2+gap)
   Tableta (768px):   2 carduri pe rand
   Desktop (1200px):  3-4 carduri pe rand
   Fara nicio linie @media scrisa manual! */

Verificare matematica: Container 1200px, gap 20px, 3 coloane:
Latime coloana = (1200 - 20×2) / 3 = (1200 - 40) / 3 = 1160 / 3 = 386.67px
La 2 coloane: (768 - 16) / 2 = 376px — calculat si verificat cu Python.

Ce proprietate CSS face ca elementele Flexbox sa treaca pe un rand nou cand nu mai incap?
A flex-direction: column
B justify-content: space-between
C flex-wrap: wrap
D align-items: stretch
5

5. Strategia Mobile First

Mobile First este o strategie de proiectare in care se incepe cu designul pentru cel mai mic ecran (telefon), apoi se adauga complexitate pentru ecrane mai mari folosind min-width in media queries.

✗ Desktop First (vechi)

  • CSS default pentru ecran mare (1200px)
  • Media queries cu max-width
  • Ascunzi/comprimi elemente pentru mobil
  • Telefon incarca CSS inutil
  • Mai greu de mentinut

✓ Mobile First (recomandat)

  • CSS default pentru telefon (375px)
  • Media queries cu min-width
  • Adaugi layout complex pentru desktop
  • Performanta mai buna pe mobil
  • Google favorizeaza indexarea mobile-first
/* ===== MOBILE FIRST: structura corecta ===== */

/* 1. Stiluri de baza (se aplica PE ORICE ecran, inclusiv telefon) */
.hero-title {
  font-size: 1.75rem;    /* mic pe telefon */
  line-height: 1.3;
}

.columns {
  display: flex;
  flex-direction: column; /* stivuit pe telefon */
  gap: 1rem;
}

/* 2. Tableta si mai mare */
@media (min-width: 768px) {
  .hero-title {
    font-size: 2.5rem;      /* mai mare pe tableta */
  }
  .columns {
    flex-direction: row;    /* orizontal pe tableta+ */
  }
}

/* 3. Desktop si mai mare */
@media (min-width: 1200px) {
  .hero-title {
    font-size: 3.5rem;      /* maxim pe desktop */
  }
}
Abordarea Mobile First inseamna:
A Sa scrii stilurile CSS incepand de la ecranele mici, adaugand reguli pentru ecrane mai mari
B Sa faci aplicatii doar pentru telefon
C Sa folosesti max-width in media queries
D Sa testezi site-ul pe telefon inainte de desktop
6

6. Erori frecvente si cum sa le eviti

Lista completa de verificare responsive

Inainte de a livra un site, verifica fiecare punct:

✗ Eroare 1: Lipsa meta viewport

Media queries-urile sunt scrise corect dar nu functioneaza pe telefon. Cauza: browserul simuleaza ecran de 980px. Fix: adauga <meta name="viewport" content="width=device-width, initial-scale=1.0"> in <head>.

✓ Fix: Adauga meta viewport

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pagina mea</title>
</head>

✗ Eroare 2: Imagini care depasesc containerul

O imagine cu width: 800px depaseste ecranul de 375px, provocand scroll orizontal. Fix:

✓ Fix: Imagini fluide

img {
  max-width: 100%;  /* niciodata mai lata decat containerul */
  height: auto;     /* pastreaza proportiile */
}

✗ Eroare 3: Text prea mic pe mobil

Font-size de 12px pe telefon este greu de citit. Regula: minim 16px pentru text de baza pe orice dispozitiv.

✓ Fix: Text fluid cu clamp

body {
  font-size: clamp(1rem, 2.5vw, 1.125rem);
  /* minim 16px, ideal 2.5vw, maxim 18px */
}

💡 Instrument de testare: In browser (Chrome/Firefox), apasa F12 → icona “Responsive Design Mode” (telefon+tableta) pentru a simula orice dimensiune de ecran fara a fi nevoie de un dispozitiv real.

Care este o eroare frecventa care face ca media queries sa nu functioneze pe telefon?
A Folosirea rem in loc de px
B Folosirea flex-wrap: wrap
C Folosirea min-width in loc de max-width
D Lipsa meta-tag viewport in <head>

Exercitii practice

Exercitiul 1 (Nivel minim) — Meta viewport si breakpoint simplu

Creeaza un fisier HTML cu meta viewport corect si o regula CSS care schimba culoarea de fundal a <body> in albastru pe ecrane cu latime mai mica de 600px si in verde pe ecrane de 600px sau mai late. Testeaza in browser cu DevTools (F12 → Responsive).

Exercitiul 2 (Nivel standard) — Layout cu Flexbox responsive

Construieste un grid de 4 carduri (titlu + text scurt) folosind Flexbox cu flex-wrap: wrap si flex: 1 1 220px. Pe telefon (sub 480px) cardurile trebuie sa fie stivuite vertical cu flex: 1 1 100%. Adauga un media query @media (max-width: 480px) pentru acest comportament.

Exercitiul 3 (Nivel performanta) — Pagina completa Mobile First

Proiecteaza o pagina cu: header cu logo + meniu, o sectiune hero cu titlu si buton, un grid de 3 articole, un footer. Aplica strategia Mobile First: stiluri default pentru telefon (375px), extinde cu min-width: 768px pentru tableta (2 coloane articole, meniu orizontal) si min-width: 1200px pentru desktop (3 coloane, hero cu imagine laterala). Foloseste clamp() pentru font-size si unitati relative pentru spatieri.

Ce ai invatat astazi

  • Design responsive = acelasi HTML/CSS afisat diferit pe ecrane de marimi diferite
  • Meta viewport este obligatoriu: <meta name="viewport" content="width=device-width, initial-scale=1.0">
  • Unitati relative: % (relativ la parinte), vw/vh (relativ la fereastra), rem (relativ la font-size radacina)
  • Media queries: @media (min-width: Xpx) { ... } aplica stiluri conditionat de latime
  • Flexbox cu flex-wrap: wrap si flex: 1 1 Xpx creeaza grid-uri adaptive fara media queries
  • Mobile First: stiluri default pentru telefon, extinse cu min-width pentru ecrane mai mari
  • Erori frecvente: lipsa meta viewport, imagini fara max-width: 100%, text prea mic pe mobil

Urmatoarea lectie

Continua cu introducerea in JavaScript: variabile, functii si manipularea DOM.

Lectia 3: Introducere JavaScript →