Aké prístupy k tvorbe responzívneho dizajnu poznáte…

Media Queries: Použitie CSS @media pravidiel na použitie štýlov na základe vlastností zariadenia (šírka, výška obrazovky, orientácia atď.).
```
/* Príklad Media Query */
@media (max-width: 600px) {
  .container {
    width: 90%;
  }
}
```

Flexibilný rozloženie mriežky (Flexible Grid Layout): Vytváranie rozloženia pomocou relatívnych jednotiek (%, vw, vh) a flexibilných vlastností (flex, grid).

/* Príklad Flexbox */
.parent {
  display: flex;
  flex-wrap: wrap; /* Umožňuje prvkom prejsť na nový riadok */
}

.child {
  flex: 1 1 200px; /* Umožňuje prvku sa rozťahovať, sťahovať a mať základnú šírku */
}

Flexibilné obrázky a médiá: Použitie CSS vlastností max-width pre obrázky a iné mediálne prvky, aby sa škálovali proporcionálne.

/* Príklad flexibilného obrázka */
img {
  max-width: 100%; /* Obrázok nebude presahovať šírku rodičovského kontajnera */
  height: auto;    /* Zachováva pomery */
}

Mobile-First vs. Desktop-First:
- Mobile-First: Štýl sa vyvíja najskôr pre mobilné zariadenia, a potom sa rozširuje pre väčšie obrazovky pomocou min-width Media Queries. Považuje sa za lepšiu prax, pretože zjednodušuje štýlovanie pre obmedzené zdroje mobilných zariadení a zlepšuje výkon.
- Desktop-First: Štýl sa vyvíja najskôr pre desktopy, a potom sa zmenšuje pre malé obrazovky pomocou max-width Media Queries.
Detekcia funkcií (Feature Detection): Použitie JavaScriptu na určenie možností prehliadača alebo zariadenia (napríklad podpora taptic rozhrania) a použitie príslušných štýlov alebo funkcií. Nástroje ako Modernizr môžu pomôcť.
Responzívna typografia: Zmena veľkosti písma a výšky riadku v závislosti od veľkosti obrazovky, často s použitím relatívnych jednotiek (em, rem, vw) a Media Queries.
```
/* Príklad responzívnej typografie */
h1 {
  font-size: 2em;
}

@media (min-width: 768px) {
  h1 {
    font-size: 3em;
  }
}
```
Detekcia na strane servera (Server-Side Detection): Určenie typu zariadenia alebo prehliadača na serveri a odoslanie príslušnej verzie stránky alebo štýlov. Menej rozšírený prístup v modernom Frontend-e.

Aké prístupy k tvorbe responzívneho dizajnu poznáte?