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).

Vezi rezolvarea

Fisier pagina.html complet:

  1. In <head> pui obligatoriu meta viewport: <meta name="viewport" content="width=device-width, initial-scale=1.0">. Fara ea browserul de pe telefon simuleaza un ecran de 980px si media query-urile nu se declanseaza niciodata.
  2. In <head> adaugi si un <style> cu stilul de baza (mobil, sub 600px) si un media query pentru ecrane mai late:
    body { background: blue; }
    @media (min-width: 600px) { body { background: green; } }
  3. Stilul de baza (fara media query) se aplica pe telefon (mobile-first) → fundal albastru. Media query-ul cu min-width: 600px suprascrie regula pe ecrane de 600px sau mai late → fundal verde.
  4. Testare: deschizi fisierul in browser, apesi F12 → iconita de telefon/tableta (Toggle device toolbar) → Responsive → tragi de marginea ferestrei peste si sub 600px si urmaresti schimbarea culorii.

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.

Vezi rezolvarea

Structura HTML: un container <div class="card-grid"> cu 4 elemente <div class="card">, fiecare cu un titlu (<h3>) si un text scurt (<p>).

  1. CSS pentru container: .card-grid { display: flex; flex-wrap: wrap; gap: 1rem; } — display: flex activeaza Flexbox, flex-wrap: wrap lasa cardurile sa treaca pe randul urmator cand nu mai incap.
  2. CSS pentru carduri (stil de baza, pentru tableta/desktop): .card { flex: 1 1 220px; } — fiecare card porneste de la 220px latime si creste/scade proportional cu spatiul ramas.
  3. Pentru telefon adaugi media query: @media (max-width: 480px) { .card { flex: 1 1 100%; } } — sub 480px fiecare card ocupa 100% din latime, deci cardurile se stivuiesc unul sub altul.
  4. Rezultat: pe ecran larg cardurile stau pe 2-4 pe rand (in functie de spatiu), pe telefon (sub 480px) stau cate unul pe rand.

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.

Vezi rezolvarea

Schita de rezolvare (Mobile First), fara cod complet — structura si ordinea pasilor:

  1. HTML: <header> (logo + nav cu link-uri), <section class="hero"> (titlu + buton), <section class="articole"> cu 3 <article>, <footer>. Nu uita meta viewport in head.
  2. Stil de baza (fara media query) = stilul pentru telefon 375px: meniul stivuit vertical (flex-direction: column), articolele intr-o singura coloana (display: flex; flex-direction: column sau flex: 1 1 100%), hero cu titlu deasupra butonului.
  3. @media (min-width: 768px): schimbi meniul pe orizontal (flex-direction: row) si articolele pe 2 coloane (flex: 1 1 45% sau grid cu 2 coloane).
  4. @media (min-width: 1200px): articolele pe 3 coloane si hero cu imagine laterala (foloseste flex pe container hero cu 2 zone: text + imagine).
  5. Font-size fluid: pentru titlul hero foloseste clamp(1.5rem, 4vw, 3rem) in loc de o valoare fixa, ca sa creasca lin intre breakpoint-uri. Pentru spatieri (padding/gap) foloseste rem, nu px.
  6. Capcane de verificat: sa nu lipseasca meta viewport; sa nu folosesti max-width in loc de min-width (asta ar fi Desktop First, opusul cerintei); imaginea hero trebuie sa aiba max-width: 100%; height: auto ca sa nu depaseasca ecranul mic.

Criterii de evaluare: (1) meta viewport prezent, (2) stilul de baza functioneaza corect pe 375px fara media query, (3) exista exact cele doua breakpoint-uri cerute cu min-width, (4) layout-ul chiar se schimba vizibil la fiecare breakpoint (coloane, orientare meniu), (5) foloseste cel putin un clamp() si unitati relative (rem/vw), nu doar px.

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

Vrei mai mult?

  • Provocare: Ia cardurile cu flex: 1 1 280px din lectie si adauga un al patrulea breakpoint, pentru ecrane foarte late (min-width: 1600px), in care gap-ul creste la 3rem si fiecare card primeste flex-basis 400px. Testeaza cu DevTools (F12, apoi Toggle device toolbar) la trei latimi diferite si noteaza la ce latime exacta se schimba layout-ul.
  • De gandit: De ce clamp(1rem, 2.5vw, 1.5rem) rezolva o problema pe care nici rem, nici vw singure n-o rezolva? Ce s-ar intampla cu textul pe un telefon ingust si pe un monitor foarte lat daca ai folosi doar 2.5vw, fara limitele minime si maxime din clamp?
  • Deschidere: Google indexeaza site-urile mobile-first, adica evalueaza intai varianta de telefon a paginii tale, nu pe cea de desktop. Un site care nu trece testul de responsive poate pierde pozitii in cautari chiar daca arata perfect pe monitorul tau de acasa.

Urmatoarea lectie

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

Lectia 3: Introducere JavaScript →