dexblog.ro
CSS Toate proprietățile CSS

@media (Media Queries) în CSS

Design Responsiv și Interfață CSS3+

Aplică blocuri de stiluri CSS condiționat, în funcție de lățimea ecranului sau setările de sistem ale utilizatorului.

Sintaxă CSS 
/* Puncte de întrerupere (breakpoints) */
@media (min-width: 768px) { ... }  /* tablete și desktop */
@media (min-width: 1024px) { ... } /* ecrane mari */
@media (prefers-color-scheme: dark) { ... } /* mod întunecat */

Ce face @media (Media Queries)

Regula @media este nucleul designului web responsiv (Responsive Web Design). Permite adaptarea interfeței pentru telefoane, tablete, monitoare 4K sau chiar la tipărirea pe hârtie (@media print).

Abordarea recomandată din industrie este Mobile-First: scrii stilurile de bază pentru telefon (ecran mic), iar prin @media (min-width: ...) adaugi treptat coloane și spații mai mari pe măsură ce ecranul crește.

De asemenea, detectează preferința de Dark Mode a sistemului prin (prefers-color-scheme: dark).

Valori uzuale

Valoare Descriere
(min-width: ...) Se aplică pe ecrane egale sau mai mari decât valoarea dată.
(max-width: ...) Se aplică pe ecrane egale sau mai mici.
(prefers-color-scheme: dark) Detectează modul întunecat setat în Windows/macOS/Android/iOS.
print Se aplică doar când pagina este trimisă la imprimantă.

Exemple

Exemplul 1: Strategie Mobile-First: de la o coloană pe telefon la două coloane pe desktop

Codul de bază e pentru mobil, media query extinde layout-ul pe ecrane de peste 768px.

/* Stil implicit pentru telefon (1 coloană) */
.grila-continut {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* De la tablete în sus (2 coloane) */
@media (min-width: 768px) {
  .grila-continut {
    flex-direction: row;
  }
}

Efect vizual în browser

Pe telefon elementele stau comod pe o singură coloană; pe ecran mai mare de 768px trec instant pe două coloane paralele.

Greșeli frecvente

  • Folosirea de breakpoint-uri rigide fixate pe un model anume de iPhone (ex. max-width: 375px); designul responsiv modern trebuie să se adapteze la orice ecran (320px, 390px, 414px, 768px, 1024px, 1440px).

Comenzi înrudite