Ako fungujú media dotazy v kontexte mobilných…

Medialne dopyty v kontexte mobilných aplikácií sa priamo nepoužívajú na štýlovanie nativných UI komponentov. Sú súčasťou CSS a používajú sa na adaptívne rozloženie webového obsahu zobrazovaného vo WebView alebo prehliadači na mobilnom zariadení.

Princíp práce v mobilnom kontexte (pre webový obsah vo WebView/prehliadači):

Webová stránka sa načíta vo WebView alebo mobilnom prehliadači.
Prehliadač/WebView určuje vlastnosti zariadenia alebo okna:
- Šírka a výška obrazovky (width, height, min-width, max-height a pod.)
- Orientácia (orientation: portrait alebo landscape)
- Rozlíšenie (resolution)
- Typ zariadenia (media type, napríklad screen)
- Iné vlastnosti (napríklad prefers-color-scheme).
CSS parser analyzuje štýly, vrátane mediálnych dopytov.
CSS pravidlá v rámci blokov @media sa uplatňujú iba v prípade, že podmienky mediálneho dopytu zodpovedajú aktuálnym vlastnostiam zariadenia/okna.

Príklad použitia:

/* Základné štýly pre všetky veľkosti */
.container {
  width: 90%;
  margin: 0 auto;
}

/* Použije sa na obrazovkách do 768px šírky (typicky pre mobilné/tablety) */
@media (max-width: 768px) {
  .container {
    width: 100%;
    padding: 0 15px;
  }

  .header {
    flex-direction: column; /* Príklad zmeny rozloženia */
  }
}

/* Použije sa na obrazovkách od 769px šírky (typicky pre tablety/desktopy) */
@media (min-width: 769px) {
  .sidebar {
    display: block; /* Zobraziť bočný panel na veľkých obrazovkách */
  }
}

/* Použije sa na šírku na šírku */
@media (orientation: landscape) {
  .some-element {
    font-size: 1.2em;
  }
}

V nativných mobilných aplikáciách sa adaptívnosť dosahuje inými mechanizmami:

Nativné UI rámce: (napríklad Auto Layout v iOS, ConstraintLayout v Android) umožňujú opisovať vzťahy medzi UI prvkami, ktoré sa prispôsobujú veľkosti a orientácii obrazovky.
Veľkosti zariadení a hustota pixelov: Vývojári používajú rôzne zdroje (napríklad zdroje drawable v Android, assety v iOS) pre rôzne rozlíšenia a hustoty displeja.
Kód: Dynamická zmena rozloženia a veľkosti prvkov v závislosti od vlastností zariadenia, získaných programovo.

Takže mediálne dopyty sú dôležité pre webView a progresívne webové aplikácie (PWA), ktoré fungujú v prostredí mobilného prehliadača, ale nie sú základom adaptívnosti v čistých nativných mobilných aplikáciách.

Ako fungujú media dotazy v kontexte mobilných aplikácií?