Responzivní design pomocí matchMedia

Funkce matchMedia() je velmi užitečná při vývoji responzivních webových stránek. Umožňují zajistit, že naše webové stránky budou dobře použitelné na mobilech, tabletech i desktopu. Pomocí této funkce můžeme například přizpůsobit rozvržení a velikost jednotlivých prvků na stránce v závislosti na velikosti obrazovky.

Funkce matchMedia() v JavaScriptu je obdobou CSS pravidel media queries @media, které slouží k testování viewportu. Tedy funkce testuje zda aktuální rozměr okna prohlížeče splňuje určité pravidla. Můžeme také skrýt nebo zobrazit určité prvky stránky, přidávat nebo odebírat určité třídy a tak dále. Syntaxe funkce matchMedia() je následující:

window.matchMedia(mediaQueryString);

Pokud se query shoduje s pravidly prohlížeče, vrátí funkce objekt MediaQueryList, kterým můžete sledovat změny stavu.

Řetězec mediaQueryString reprezentuje pravidla média, které se testují. Tento řetězec je tvořen stejným způsobem jako v CSS, například:

window.matchMedia('(min-width: 600px)');

Tento příklad vrátí objekt MediaQueryList, který testuje, zda je šířka okna větší nebo rovna 600 pixelů. Objekt MediaQueryList obsahuje vlastnosti a metody pro práci s médii. Některé z těchto vlastností a metod jsou: media - vlastnost, která vrací řetězec s pravidly médií, na které se testuje matches - vlastnost, která vrací boolean hodnotu, která říká, zda se aktuální rozměry okna shodují s pravidly médií addListener() - metoda, která přidává posluchač funkce pro sledování změn stavu média removeListener() - metoda, která odebírá posluchač funkce pro sledování změn stavu média Použití matchMedia() může být užitečné pro dynamickou změnu CSS v závislosti na velikosti okna prohlížeče a média, která jsou použita v dokumentu.

Sledování změn velikosti okna

JavaScriptu umožňuje sledovat změny šířky okna/viewportu pomocí přidání listeneru addListener() pro MediaQueryList. Pokud se hodnota média změní (např. když uživatel změní velikost okna prohlížeče), MediaQueryList objekt vytvořený pomocí matchMedia() vyvolá událost změny stavu. Není tak nutné využívat událost onresize. Navíc se detekuje pouze změna (jindy se funkce nezavolá).

Například následující kód ukazuje, jak lze použít funkci matchMedia() a addListener() k přidání posluchače události změny stavu pro médium s maximální šířkou 600px:

Funkce onresize je standardní vlastností objektu window v JavaScriptu, která umožňuje přidat posluchače na událost pro změnu velikosti okna prohlížeče. Tato funkce se spustí vždy, když uživatel změní velikost okna prohlížeče. Tuto vlastnost lze použít k vyvolání akcí při změně velikosti okna prohlížeče, například k přizpůsobení rozvržení stránky nebo aktualizaci dat. Například následující kód ukazuje, jak přidat posluchači události onresize pro okno prohlížeče:

function handleResize() {
  console.log("Okno prohlížeče bylo změněno.");
}

window.onresize = handleResize;

V tomto příkladu se funkce handleResize() přiřadí do vlastnosti onresize objektu window. Pokud se velikost okna prohlížeče změní, funkce handleResize() se spustí a vypíše zprávu do konzole. Funkce onresize může být užitečná při sledování změn šířky a výšky okna prohlížeče, ale má některá omezení. Například se spustí při každé změně velikosti okna, což může vést k nadměrnému počtu událostí. Navíc se nezajímá o konkrétní velikost nebo rozsah velikostí, jako to umožňuje funkce matchMedia(). Pokud potřebujete více specifické podmínky pro sledování změn velikosti, je lepší použít funkci matchMedia().