Jakie podejścia do tworzenia responsywnego designu…

Media Queries: Użycie reguł CSS @media do stosowania stylów na podstawie cech urządzenia (szerokość, wysokość ekranu, orientacja itp.).
```
/* Przykład Media Query */
@media (max-width: 600px) {
  .container {
    width: 90%;
  }
}
```

Elastyczny układ siatki (Flexible Grid Layout): Tworzenie układów z użyciem jednostek względnych (%, vw, vh) i właściwości elastycznych (flex, grid).

/* Przykład Flexbox */
.parent {
  display: flex;
  flex-wrap: wrap; /* Pozwala elementom przejść do nowego wiersza */
}

.child {
  flex: 1 1 200px; /* Pozwala elementowi się rozciągać, kurczyć i mieć podstawową szerokość */
}

Elastyczne obrazy i media: Użycie właściwości CSS max-width, aby obrazy i inne media skalowały się proporcjonalnie.

/* Przykład elastycznego obrazu */
img {
  max-width: 100%; /* Obraz nie przekroczy szerokości elementu nadrzędnego */
  height: auto;    /* Zachowuje proporcje */
}

Mobile-First vs. Desktop-First:
- Mobile-First: Styl jest tworzony najpierw dla urządzeń mobilnych, a następnie rozszerzany dla większych ekranów za pomocą min-width w Media Queries. Uważa się to za dobrą praktykę, ponieważ upraszcza stylizację dla ograniczonych zasobów mobilnych i poprawia wydajność.
- Desktop-First: Styl jest tworzony najpierw dla komputerów stacjonarnych, a następnie zmniejszany dla małych ekranów za pomocą max-width w Media Queries.
Wykrywanie funkcji (Feature Detection): Użycie JavaScript do określenia możliwości przeglądarki lub urządzenia (np. obsługa interfejsu dotykowego) i stosowania odpowiednich stylów lub funkcji. Narzędzia takie jak Modernizr mogą pomóc.
Typografia responsywna: Zmiana rozmiaru czcionki i wysokości linii w zależności od rozmiaru ekranu, często z użyciem jednostek względnych (em, rem, vw) i Media Queries.
```
/* Przykład responsywnej typografii */
h1 {
  font-size: 2em;
}

@media (min-width: 768px) {
  h1 {
    font-size: 3em;
  }
}
```
Wykrywanie po stronie serwera: Identyfikacja typu urządzenia lub przeglądarki na serwerze i wysyłanie odpowiedniej wersji strony lub stylów. Mniej powszechne w nowoczesnym frontendzie.

Jakie podejścia do tworzenia responsywnego designu znasz?