matchMedia în JavaScript

const mq = matchMedia("(max-width: 600px)");
mq.matches
mq.addEventListener("change", functie)

Ce face matchMedia

matchMedia(interogare) primește același text ca @media din CSS și returnează un obiect cu matches (true sau false). Interogări utile: (max-width: 600px), (prefers-color-scheme: dark), (prefers-reduced-motion: reduce), (hover: none) (ecrane tactile).

Evenimentul change anunță când rezultatul se schimbă (fereastră redimensionată, tema sistemului schimbată), fără să mai asculți resize.

Parametri

Parametru	Descriere
interogare	O interogare media CSS.

Ce returnează

Un obiect MediaQueryList.

Exemple

Exemplul 1: Tema întunecată și ecranele mici

Al doilea rând apare după îngustarea ferestrei sub 600 de pixeli.

const intunecat = matchMedia("(prefers-color-scheme: dark)");
const mobil = matchMedia("(max-width: 600px)");

console.log(intunecat.matches, mobil.matches);
mobil.addEventListener("change", (e) => console.log(e.matches ? "aspect mobil" : "aspect desktop"));

Rezultat în browser

true false
aspect mobil

Greșeli frecvente

• Uiți parantezele: matchMedia("max-width: 600px") nu este o interogare validă și dă mereu false.

Comenzi înrudite

• getComputedStyle: Returnează stilurile finale ale unui element, după aplicarea tuturor regulilor CSS.
• ResizeObserver: Anunță când un element își schimbă mărimea, indiferent de cauză (fereastră, conținut, CSS).
• addEventListener: Rulează o funcție când se întâmplă ceva pe pagină: un clic, o tastă, trimiterea unui formular.