Introducere în CSS Media Queries

Introducere în Media Queries

Media queries sunt o componentă esențială a CSS-ului modern, permițând aplicarea stilurilor în funcție de caracteristicile dispozitivului utilizatorului. Ele stau la baza designului responsive, adaptând layout-ul și stilurile la diferite dimensiuni de ecran, orientări sau preferințe de utilizator.

Ce sunt media queries și de ce sunt importante

Media queries sunt instrucțiuni CSS care testează condiții precum lățimea ecranului, tipul de dispozitiv sau orientarea. Dacă condiția este îndeplinită, stilurile din interiorul media query-ului se aplică.

@media (max-width: 768px) {
  body {
    background-color: #f0f0f0;
  }
}

Acest exemplu aplică un fundal gri deschis doar dacă ecranul are o lățime de cel mult 768px — ideal pentru telefoane mobile.

Rolul lor în designul responsive

Designul responsive presupune ca site-ul să se adapteze automat la orice dimensiune de ecran. Media queries permit:

Ascunderea sau afișarea elementelor în funcție de dispozitiv
Redimensionarea fonturilor și a spațierii
Rearanjarea layout-ului pentru o experiență optimă

Fără media queries, un site ar arăta la fel pe toate dispozitivele — ceea ce poate duce la o experiență slabă pe mobil sau tabletă.

Diferența dintre media types și media features

Media types definesc tipul general de mediu:

screen - pentru ecrane (desktop, mobil, tabletă)
print - pentru tipărire
speech - pentru cititoare vocale

Media features sunt condiții specifice testate în cadrul media query-ului:

max-width, min-width - dimensiunea viewportului
orientation - portrait sau landscape
prefers-color-scheme - detectează tema dark/light

@media screen and (min-width: 1024px) {
  .sidebar {
    display: block;
  }
}

Aici se aplică stilurile doar pe ecrane (screen) cu o lățime de cel puțin 1024px.

Sintaxa Media Queries

Structura generală

Media queries folosesc directiva @media urmată de o condiție și un bloc de stiluri. Sintaxa de bază:

@media (condiție) {
  /* Stiluri aplicate dacă condiția e adevărată */
}

Exemple simple și clare

@media (max-width: 768px) {
  .menu {
    display: none;
  }
}

@media (min-width: 1024px) {
  .container {
    padding: 40px;
  }
}

Explicația cuvintelor cheie

@media - inițiază o interogare media
and - combină mai multe condiții
not - inversează condiția
only - previne aplicarea pe browsere vechi (rar folosit)

@media only screen and (max-width: 600px) {
  .box {
    background: #eee;
  }
}

@media not screen and (min-width: 800px) {
  .sidebar {
    display: none;
  }
}

🔧 Exemplu live - Media Query cu max-width

<div class="responsive-box">Redimensionează fereastra</div>

.responsive-box {
  background: #3498db;
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 6px;
  transition: background 0.3s ease;
}

@media (max-width: 768px) {
  .responsive-box {
    background: #e74c3c;
  }
}

Tipuri de Media

Media types: `screen`, `print`, `speech`

Media types definesc tipul general de mediu în care se aplică stilurile CSS. Cele mai comune sunt:

screen - pentru afișare pe ecrane (desktop, mobil, tabletă)
print - pentru tipărire (afișat doar când se imprimă pagina)
speech - pentru cititoare vocale (folosit rar)

Acestea pot fi combinate cu media features pentru a aplica stiluri condiționate.

Când și cum se folosesc

Media types se folosesc pentru a adapta stilurile în funcție de contextul de afișare:

screen: layout-uri responsive, ascunderea elementelor pe mobil etc.
print: eliminarea elementelor inutile la imprimare (meniuri, animații)
speech: optimizare pentru cititoare vocale (accesibilitate)

@media print {
  nav, footer {
    display: none;
  }

  body {
    font-size: 12pt;
    color: black;
  }
}

Exemplu: stiluri diferite pentru print vs. ecran

În exemplul de mai jos, fundalul este albastru pe ecran și alb la imprimare:

@media screen {
  .box {
    background: #3498db;
    color: white;
  }
}

@media print {
  .box {
    background: white;
    color: black;
    border: 1px solid #000;
  }
}

🔧 Exemplu live - Stiluri diferite pentru print vs. ecran

<div class="box">Această casetă arată diferit la imprimare</div>

@media screen {
  .box {
    background: #3498db;
    color: white;
    padding: 20px;
    text-align: center;
    border-radius: 6px;
  }
}

@media print {
  .box {
    background: white;
    color: black;
    border: 1px solid #000;
    padding: 20px;
    text-align: center;
  }
}

Media Features frecvent folosite

Media features populare: `max-width`|`min-width`|`orientation`|`prefers-color-scheme`

Media features sunt condiții specifice testate în cadrul unei interogări media. Cele mai folosite sunt:

max-width - aplică stiluri dacă lățimea viewportului este mai mică decât o valoare
min-width - aplică stiluri dacă lățimea este mai mare decât o valoare
orientation - detectează dacă ecranul este în portrait sau landscape
prefers-color-scheme - detectează preferința utilizatorului pentru tema dark sau light

`max-width` vs. `min-width`

Aceste două media features sunt fundamentale pentru designul responsive:

max-width: folosit pentru a aplica stiluri pe ecrane mai mici (ex: telefoane)
min-width: folosit pentru a extinde stilurile pe ecrane mai mari (ex: desktop)

@media (max-width: 600px) {
  .nav {
    display: none;
  }
}

@media (min-width: 1024px) {
  .nav {
    display: flex;
  }
}

Exemplu: adaptarea layout-ului în funcție de lățimea ecranului

În exemplul de mai jos, layout-ul se modifică automat în funcție de dimensiunea ecranului:

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

@media (min-width: 768px) {
  .grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

🔧 Exemplu live - Layout adaptiv cu media queries

<div class="grid">
  <div class="item">Coloana 1</div>
  <div class="item">Coloana 2</div>
  <div class="item">Coloana 3</div>
</div>

.grid {
  display: grid;
  gap: 20px;
  padding: 20px;
  grid-template-columns: 1fr;
}

.item {
  background: #3498db;
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 6px;
}

@media (min-width: 768px) {
  .grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

Design Responsive cu Breakpoints

Ce sunt breakpoints și cum le alegem

Breakpoints sunt puncte de întrerupere în layout, definite prin media queries, care permit adaptarea stilurilor în funcție de dimensiunea ecranului. Ele marchează tranziția între diferite versiuni ale designului: mobil, tabletă, desktop etc.

Nu există un set universal — breakpoints se aleg în funcție de conținutul și structura site-ului. Ideal, se bazează pe dimensiunile reale ale conținutului, nu doar pe dispozitive.

Exemple de breakpoints comune

Iată câteva valori orientative folosite frecvent:

320px - 480px: telefoane mici
481px - 768px: telefoane mari / tablete în portret
769px - 1024px: tablete în landscape
1025px - 1200px: desktop-uri mici
1201px+: desktop-uri mari / monitoare wide

@media (max-width: 768px) {
  .nav {
    flex-direction: column;
  }
}

@media (min-width: 1024px) {
  .nav {
    flex-direction: row;
  }
}

Strategii: mobile-first vs. desktop-first

Mobile-first înseamnă că stilurile implicite sunt pentru ecrane mici, iar media queries extind designul pentru ecrane mai mari.

.card {
  font-size: 1rem;
}

@media (min-width: 768px) {
  .card {
    font-size: 1.2rem;
  }
}

Desktop-first presupune că stilurile implicite sunt pentru desktop, iar media queries le restrâng pentru mobil.

.card {
  font-size: 1.2rem;
}

@media (max-width: 768px) {
  .card {
    font-size: 1rem;
  }
}

🔧 Exemplu live - Breakpoints responsive

<div class="card">Această casetă se adaptează la ecran</div>

.card {
  background: #3498db;
  color: white;
  padding: 20px;
  font-size: 1rem;
  text-align: center;
  border-radius: 6px;
  transition: font-size 0.3s ease;
}

@media (min-width: 768px) {
  .card {
    font-size: 1.2rem;
  }
}

@media (min-width: 1024px) {
  .card {
    font-size: 1.5rem;
  }
}

Organizarea Media Queries în CSS

Unde le plasăm în fișierul CSS

Media queries pot fi plasate:

La finalul fișierului CSS - stilurile de bază sunt definite mai întâi, apoi cele condiționate
Imediat după componenta pe care o afectează - util pentru stiluri modulare

/* Stiluri de bază */
.button {
  padding: 12px 24px;
  font-size: 1rem;
}

/* Media query la final */
@media (max-width: 768px) {
  .button {
    font-size: 0.9rem;
  }
}

Gruparea logică a stilurilor

Organizarea media queries pe componente sau funcționalități ajută la întreținerea codului:

Grupare pe secțiuni: header, nav, footer
Grupare pe breakpoints: mobile, tablet, desktop

/* Grupare pe componente */
.header { ... }
@media (max-width: 768px) {
  .header { ... }
}

.nav { ... }
@media (max-width: 768px) {
  .nav { ... }
}

Separarea stilurilor în fișiere externe

Pentru proiecte mari, e recomandat să separi stilurile în fișiere dedicate:

base.css - stiluri de bază
responsive.css - media queries și layout adaptiv
print.css - stiluri pentru tipărire

<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/responsive.css">
<link rel="stylesheet" href="css/print.css" media="print">

🔧 Exemplu live - Organizare media queries

<button class="button">Apasă-mă</button>

.button {
  background: #3498db;
  color: white;
  padding: 12px 24px;
  font-size: 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: font-size 0.3s ease;
}

/* Media query la final */
@media (max-width: 768px) {
  .button {
    font-size: 0.8rem;
  }
}

Exemple practice

Layout care se adaptează pe mobil

Un layout simplu cu două coloane pe desktop care devine o singură coloană pe mobil:

.layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 768px) {
  .layout {
    grid-template-columns: 1fr;
  }
}

🔧 Exemplu live - Layout adaptiv

<div class="layout">
  <div class="box">Coloana 1</div>
  <div class="box">Coloana 2</div>
</div>

.layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 20px;
}

.box {
  background: #3498db;
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 6px;
}

@media (max-width: 768px) {
  .layout {
    grid-template-columns: 1fr;
  }
}

Meniu care se transformă în hamburger

Un meniu orizontal care devine vertical și ascuns pe mobil, activat printr-un buton:

.menu {
  display: flex;
  gap: 20px;
}

.menu-toggle {
  display: none;
}

@media (max-width: 768px) {
  .menu {
    display: none;
    flex-direction: column;
  }

  .menu-toggle {
    display: block;
  }

  .menu.active {
    display: flex;
  }
}

🔧 Exemplu live - Meniu hamburger

<button class="menu-toggle">☰ Meniu</button>
<nav class="menu">
  <a href="#">Acasă</a>
  <a href="#">Despre</a>
  <a href="#">Contact</a>
</nav>

.menu {
  display: flex;
  gap: 20px;
  background: #2ecc71;
  padding: 10px;
  border-radius: 6px;
}

.menu a {
  color: white;
  text-decoration: none;
}

.menu-toggle {
  display: none;
  background: #27ae60;
  color: white;
  border: none;
  padding: 10px 20px;
  margin-bottom: 10px;
  border-radius: 4px;
  cursor: pointer;
}

@media (max-width: 768px) {
  .menu {
    display: none;
    flex-direction: column;
  }

  .menu-toggle {
    display: block;
  }

  .menu.active {
    display: flex;
  }
}

document.querySelector(".menu-toggle").addEventListener("click", function() {
  document.querySelector(".menu").classList.toggle("active");
});

Galerie care trece de la 1 la 4 coloane în funcție de ecran

O galerie flexibilă care se adaptează automat la dimensiunea ecranului:

.gallery {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1200px) {
  .gallery {
    grid-template-columns: repeat(4, 1fr);
  }
}

🔧 Exemplu live - Galerie responsive

<div class="gallery">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

.gallery {
  display: grid;
  gap: 20px;
  padding: 20px;
  grid-template-columns: 1fr;
}

.item {
  background: #9b59b6;
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 6px;
}

@media (min-width: 600px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 900px) {
  .gallery {
    grid-template-columns: repeat(3, 1fr);
}

@media (min-width: 1200px) {
  .gallery {
    grid-template-columns: repeat(4, 1fr);
}

Testare și depanare

Cum folosim DevTools pentru simularea dispozitivelor

Toate browserele moderne oferă instrumente de dezvoltare (DevTools) care permit simularea diferitelor dimensiuni de ecran și dispozitive. În Chrome, Firefox și Edge, poți accesa modul responsive astfel:

Click dreapta pe pagină → Inspect sau Inspect Element
Apasă Ctrl + Shift + I sau F12
Activează Device Toolbar (iconița cu telefon/tabletă)

Poți selecta dispozitive predefinite (iPhone, iPad, Galaxy etc.) sau introduce dimensiuni personalizate.

Moduri responsive în Chrome, Firefox, Edge

Fiecare browser oferă o experiență ușor diferită:

Chrome: Device Toolbar + opțiuni pentru rotație, zoom, throttling
Firefox: Responsive Design Mode + simulare DPI și orientare
Edge: similar cu Chrome, dar cu integrare mai bună pentru testare pe Windows

În toate cazurile, poți inspecta elementele, modifica stiluri în timp real și testa media queries direct în DevTools.

Detectarea problemelor de stil

DevTools te ajută să identifici rapid problemele legate de media queries:

Verifică dacă stilurile din media query sunt suprascrise
Folosește tab-ul Computed pentru a vedea stilurile active
Activează și dezactivează clase pentru a testa comportamentul responsive

Poți chiar să adaugi temporar media queries direct în DevTools pentru testare rapidă.

@media (max-width: 600px) {
  .debug {
    outline: 2px dashed red;
  }
}

🔧 Exemplu live - Testare media query în DevTools

<div class="debug">Redimensionează fereastra sau simulează un dispozitiv</div>

.debug {
  background: #3498db;
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 6px;
  transition: outline 0.3s ease;
}

@media (max-width: 600px) {
  .debug {
    outline: 2px dashed red;
  }
}

Greșeli comune și cum le evităm

Folosirea excesivă a media queries

Unul dintre cele mai frecvente greșeli este suprasaturarea fișierului CSS cu media queries pentru fiecare mică variație. Acest lucru duce la:

Cod greu de întreținut
Conflicte între stiluri
Performanță scăzută

Soluție: Folosește breakpoints bine alese și stiluri scalabile cu clamp(), flex, grid.

/* Evită asta */
@media (max-width: 500px) { ... }
@media (max-width: 520px) { ... }
@media (max-width: 540px) { ... }

/* Mai bine */
@media (max-width: 600px) { ... }

Breakpoints arbitrare fără testare

Definirea de breakpoints fără a testa layout-ul pe dispozitive reale sau simulări poate duce la experiențe neuniforme. De exemplu, un breakpoint la 850px poate fi inutil dacă nu corespunde niciunui dispozitiv real.

Soluție: Testează layout-ul în DevTools și bazează breakpoints pe conținut, nu pe presupuneri.

Lipsa unei strategii clare de responsive design

Fără o abordare coerentă (mobile-first sau desktop-first), stilurile pot deveni contradictorii și greu de scalat.

Soluție: Alege o strategie și aplic-o consecvent. Recomandat: mobile-first, cu stiluri implicite pentru ecrane mici și media queries pentru extindere.

/* Mobile-first */
.card {
  font-size: 1rem;
}

@media (min-width: 768px) {
  .card {
    font-size: 1.2rem;
  }
}

🔧 Exemplu live - Strategie mobile-first corectă

<div class="card">Scalare corectă pe ecrane diferite</div>

.card {
  background: #e67e22;
  color: white;
  padding: 20px;
  font-size: 1rem;
  text-align: center;
  border-radius: 6px;
  transition: font-size 0.3s ease;
}

@media (min-width: 768px) {
  .card {
    font-size: 1.2rem;
  }
}

@media (min-width: 1024px) {
  .card {
    font-size: 1.5rem;
  }
}

Recapitulare și exercițiu final

Recapitularea conceptelor cheie

Media queries permit aplicarea stilurilor CSS în funcție de caracteristicile dispozitivului
Media types definesc mediul general: screen, print, speech
Media features testează condiții specifice: max-width, orientation, prefers-color-scheme
Breakpoints sunt puncte de tranziție în layout, alese strategic
Mobile-first este abordarea recomandată pentru design responsive
DevTools sunt esențiale pentru testare și depanare

Exercițiu: creează o pagină cu layout adaptabil pentru 3 dimensiuni de ecran

Scopul este să construiești o secțiune cu 3 casete care se afișează:

În 1 coloană pe mobil
În 2 coloane pe tabletă
În 3 coloane pe desktop

.grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

Provocare: adaugă stiluri diferite pentru orientarea landscape

Folosește media query cu orientation pentru a modifica stilul în mod dinamic:

@media (orientation: landscape) {
  .grid {
    background: #f1c40f;
  }
}

🔧 Exercițiu final - Layout adaptabil + orientare

<div class="grid">
  <div class="item">Box 1</div>
  <div class="item">Box 2</div>
  <div class="item">Box 3</div>
</div>

.grid {
  display: grid;
  gap: 20px;
  padding: 20px;
  grid-template-columns: 1fr;
  background: #3498db;
}

.item {
  background: white;
  color: #3498db;
  padding: 20px;
  text-align: center;
  border-radius: 6px;
  font-weight: bold;
}

/* Tabletă */
@media (min-width: 768px) {
  .grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* Orientare landscape */
@media (orientation: landscape) {
  .grid {
    background: #f1c40f;
  }

  .item {
    color: #f1c40f;
    background: #fffbe6;
  }
}

🧠 Quiz - Media Queries

CSS Flexbox ➔