Co należy określić w CSS, aby skonfigurować i…

Zapytanie medialne @media jest używane. W jego obrębie określane są warunki do stosowania stylów, oparte na cechach urządzenia lub obszaru wyświetlania.

Główne parametry zapytań medialnych:

width / height: Szerokość / wysokość obszaru wyświetlania.
min-width / min-height: Minimalna szerokość / wysokość obszaru wyświetlania.
max-width / max-height: Maksymalna szerokość / wysokość obszaru wyświetlania.
orientation: Orientacja urządzenia (portrait lub landscape).

Przykład użycia do ustawiania punktów przerwania:

/* Domyślne style dla ekranów mniejszych niż 768px */
body {
  font-size: 16px;
}

/* Punkt przerwania dla ekranów od 768px do 991px */
@media (min-width: 768px) and (max-width: 991px) {
  body {
    font-size: 18px;
  }
}

/* Punkt przerwania dla ekranów od 992px i więcej */
@media (min-width: 992px) {
  body {
    font-size: 20px;
  }
}

Popularne strategie ustawiania punktów przerwania:

Mobile First: Najpierw definiuje się style dla najmniejszych ekranów, potem dodaje zapytania z min-width dla szerszych ekranów.
Desktop First: Najpierw style dla dużych ekranów, potem zapytania z max-width dla węższych ekranów.

Wybór strategii zależy od projektu i preferencji.

Przybliżone wartości standardowe punktów przerwania (zależne od frameworka lub umowy):

Urządzenie	Zakres szerokości	Zapytanie medialne (Mobile First)	Zapytanie medialne (Desktop First)
Małe telefony	< 576px	Brak (style podstawowe)	`@media (max-width: 575.98px)`
Telefony	>= 576px	`@media (min-width: 576px)`	`@media (max-width: 767.98px)`
Tablety	>= 768px	`@media (min-width: 768px)`	`@media (max-width: 991.98px)`
Laptopy	>= 992px	`@media (min-width: 992px)`	`@media (max-width: 1199.98px)`
Desktopy	>= 1200px	`@media (min-width: 1200px)`	`@media (max-width: 1399.98px)`
Duże desktopy	>= 1400px	`@media (min-width: 1400px)`	Brak (style podstawowe)

Ważne jest, aby wybierać punkty przerwania na podstawie zawartości i układu, a nie tylko standardów urządzeń. Powinny one aktywować się tam, gdzie układ zaczyna się 'psuć'.

Co należy określić w CSS, aby skonfigurować i zastosować te punkty przerwania?