Ako fungujú mediálne dopyty vo webovom vývoji pre…

Mediálne požiadavky umožňujú použitie určitých štýlov CSS v závislosti od vlastností zariadenia alebo oblasti zobrazenia. Sú určené na vytváranie responzívneho dizajnu, ktorý sa správne zobrazí na rôznych obrazovkách, vrátane mobilných zariadení, tabletov a desktopov.

Hlavná syntax médiovej požiadavky:

@media <typ_médiá> and (<výraz>) {
  /* CSS pravidlá */
}

<typ_médiá> určuje, na aký typ zariadenia sa požiadavka vzťahuje (napríklad screen, print, all).
<výraz> stanovuje podmienky, za ktorých sa aplikujú štýly (napríklad šírka, výška, orientácia obrazovky, rozlíšenie).

Populárne výrazy pre responzívne rozloženie:

min-width: Štýly sa aplikujú, ak je šírka oblasti zobrazenia rovná alebo väčšia ako uvedená hodnota.
max-width: Štýly sa aplikujú, ak je šírka oblasti zobrazenia rovná alebo menšia ako uvedená hodnota.
orientation: Štýly sa aplikujú v závislosti od orientácie obrazovky (portrait alebo landscape).
resolution: Štýly sa aplikujú v závislosti od rozlíšenia obrazovky.

Príklad použitia max-width pre štýlovanie na mobilných zariadeniach:

/* Štýly podľa predvoleného nastavenia */
body {
  font-size: 16px;
}

/* Štýly pre obrazovky do šírky 768px (typické pre mobilné zariadenia) */
@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }
  .container {
    padding: 10px;
  }
}

Príklad použitia min-width pre štýlovanie na desktopoch (prístup "mobile first"):

/* Štýly pre mobilné zariadenia podľa predvoleného nastavenia */
.column {
  width: 100%;
}

/* Štýly pre obrazovky od šírky 992px (typické pre desktop) */
@media screen and (min-width: 992px) {
  .column {
    width: 50%;
    float: left;
  }
}

Kombinácia výrazov s operátormi and, or (or v mediálnych požiadavkách sa zapisuje čiarkou) a not:

@media screen and (min-width: 768px) and (max-width: 1024px) {
  /* Štýly iba pre tablety */
}

@media screen and (orientation: landscape), print {
  /* Štýly pre na šírku obrazovky a pre tlač */
}

Meta tag viewport je dôležitý pre správnu funkciu mediálnych požiadaviek na mobilných zariadeniach:

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

width=device-width nastavuje šírku oblasti zobrazenia rovnakú ako šírka zariadenia.
initial-scale=1.0 nastavuje počiatočný mierku.

Bez tohto meta tagu mnoho mobilných prehliadačov škáluje stránku predvolene, ignorujúc skutočnú šírku zariadenia, čo narúša responzívnosť.

Ako fungujú mediálne dopyty vo webovom vývoji pre responzívny dizajn, vrátane mobilných zariadení?