Jak fungují mediální dotazy ve webovém vývoji pro…

Media dotazy umožňují aplikovat specifické styly CSS v závislosti na vlastnostech zařízení nebo oblasti zobrazení. Používají se k vytvoření responzivního designu, který se správně zobrazí na různých obrazovkách, včetně mobilních zařízení, tabletů a desktopů.

Hlavní syntaxe media dotazu:

@media <typ_média> and (<výraz>) {
  /* CSS pravidla */
}

<typ_média> určuje, na jaký typ zařízení se dotaz vztahuje (například screen, print, all).
<výraz> stanoví podmínky, za kterých se styly použijí (například šířka, výška, orientace obrazovky, rozlišení).

Oblíbené výrazy pro responzivní návrh:

min-width: Styly se použijí, pokud je šířka oblasti zobrazení rovna nebo větší než zadaná hodnota.
max-width: Styly se použijí, pokud je šířka oblasti zobrazení rovna nebo menší než zadaná hodnota.
orientation: Styly se použijí v závislosti na orientaci obrazovky (portrait nebo landscape).
resolution: Styly se použijí v závislosti na rozlišení obrazovky.

Příklad použití max-width pro stylování na mobilních zařízeních:

/* Výchozí styly */
body {
  font-size: 16px;
}

/* Styly pro obrazovky do 768px šířky (typicky pro mobily) */
@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }
  .container {
    padding: 10px;
  }
}

Příklad použití min-width pro stylování na desktopech (přístup "mobile first"):

/* Výchozí styly pro mobily */
.column {
  width: 100%;
}

/* Styly pro obrazovky od 992px šířky (typicky pro desktopy) */
@media screen and (min-width: 992px) {
  .column {
    width: 50%;
    float: left;
  }
}

Kombinace výrazů s operátory and, or (v media dotazech se or zapisuje čárkou) a not:

@media screen and (min-width: 768px) and (max-width: 1024px) {
  /* Pouze pro tablety */
}

@media screen and (orientation: landscape), print {
  /* Pro orientaci na šířku a pro tisk */
}

Meta-tag viewport je důležitý pro správnou funkci media dotazů na mobilních zařízeních:

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

width=device-width nastaví šířku oblasti zobrazení na šířku zařízení.
initial-scale=1.0 nastaví počáteční úroveň přiblížení.

Bez tohoto meta-tagu mnoho mobilních prohlížečů stránku zvětšuje ve výchozím nastavení, ignorujíc skutečnou šířku zařízení, což narušuje responzivitu.

Jak fungují mediální dotazy ve webovém vývoji pro responzivní rozvržení, včetně mobilních zařízení?