Cum funcționează interogările media în dezvoltarea…

Interogările media permit aplicarea anumitor stiluri CSS în funcție de caracteristicile dispozitivului sau ale zonei de vizualizare. Ele sunt utilizate pentru a crea un design adaptabil, care se afișează corect pe diferite ecrane, inclusiv dispozitive mobile, tablete și desktop-uri.

Sintaxa principală a unei interogări media:

@media <tip_media> and (<expresie>) {
  /* reguli CSS */
}

<tip_media> determină pentru ce tip de dispozitiv se aplică interogarea (de exemplu, screen, print, all).
<expresie> stabilește condițiile în care se aplică stilurile (de exemplu, lățime, înălțime, orientarea ecranului, rezoluție).

Expresii populare pentru design adaptabil:

min-width: Stilurile se aplică dacă lățimea zonei de vizualizare este egală sau mai mare decât valoarea specificată.
max-width: Stilurile se aplică dacă lățimea zonei de vizualizare este egală sau mai mică decât valoarea specificată.
orientation: Stilurile se aplică în funcție de orientarea ecranului (portrait sau landscape).
resolution: Stilurile se aplică în funcție de rezoluția ecranului.

Exemplu de utilizare a max-width pentru stilizare pe dispozitive mobile:

/* Stiluri implicite */
body {
  font-size: 16px;
}

/* Stiluri pentru ecrane cu lățimea până la 768px (tipic pentru mobile) */
@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }
  .container {
    padding: 10px;
  }
}

Exemplu de utilizare a min-width pentru stilizare pe desktop (abordare "mobile first"):

/* Stiluri implicite pentru mobile */
.column {
  width: 100%;
}

/* Stiluri pentru ecrane cu lățimea de la 992px în sus (tipic pentru desktop) */
@media screen and (min-width: 992px) {
  .column {
    width: 50%;
    float: left;
  }
}

Combinarea expresiilor cu operatorii and, or (în interogările media, or se scrie cu virgulă) și not:

@media screen and (min-width: 768px) and (max-width: 1024px) {
  /* Doar pentru tablete */
}

@media screen and (orientation: landscape), print {
  /* Pentru orientarea peisaj și pentru imprimare */
}

Meta-tag-ul viewport este important pentru funcționarea corectă a interogărilor media pe dispozitivele mobile:

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

width=device-width setează lățimea zonei de vizualizare egal cu lățimea dispozitivului.
initial-scale=1.0 setează nivelul de zoom inițial.

Fără acest meta-tag, multe browsere mobile scalează pagina implicit, ignorând lățimea reală a dispozitivului, ceea ce afectează responsivitatea.

Cum funcționează interogările media în dezvoltarea web pentru designul adaptiv, inclusiv dispozitivele mobile?