Mit kell megadni a CSS-ben ezeknek a töréspontoknak a…

A @media médiakérdést használják. Benne feltételeket határoz meg a stílusok alkalmazására, az eszköz jellemzői vagy a nézetterület alapján.

A médiakérdések fő paraméterei:

width / height: A nézetterület szélessége / magassága.
min-width / min-height: A nézetterület minimális szélessége / magassága.
max-width / max-height: A nézetterület maximális szélessége / magassága.
orientation: Az eszköz tájolása (portrait vagy landscape).

Használati példa a töréspontok beállítására:

/* Alapértelmezett stílusok kisebb, mint 768px-es képernyőkhöz */
body {
  font-size: 16px;
}

/* Töréspont 768px és 991px között */
@media (min-width: 768px) and (max-width: 991px) {
  body {
    font-size: 18px;
  }
}

/* Töréspont 992px-től felfelé */
@media (min-width: 992px) {
  body {
    font-size: 20px;
  }
}

Gyakran használt stratégiák:

Mobile First: Először a legkisebb képernyőkhöz írunk stílusokat, majd min-width-es médiakérdésekkel bővítjük a nagyobb képernyőkhöz.
Desktop First: Először a nagyobb képernyőkhöz írunk stílusokat, majd max-width-es kérdésekkel a kisebbekhez.

A stratégia kiválasztása a projekt és az egyéni preferenciák kérdése.

Átlagos értékek a töréspontokhoz (a keretrendszertől vagy megállapodástól függően):

Eszköz	Szélesség tartomány	Média kérdés (Mobile First)	Média kérdés (Desktop First)
Kis telefonok	< 576px	Nincs (alapértelmezett stílusok)	`@media (max-width: 575.98px)`
Telefonok	>= 576px	`@media (min-width: 576px)`	`@media (max-width: 767.98px)`
Táblagépek	>= 768px	`@media (min-width: 768px)`	`@media (max-width: 991.98px)`
Laptopok	>= 992px	`@media (min-width: 992px)`	`@media (max-width: 1199.98px)`
Asztali gépek	>= 1200px	`@media (min-width: 1200px)`	`@media (max-width: 1399.98px)`
Nagy asztali gépek	>= 1400px	`@media (min-width: 1400px)`	Nincs (alapértelmezett stílusok)

Fontos, hogy a töréspontokat a tartalom és a layout alapján válasszuk, ne csak az eszközök szabványai szerint. Ott aktiválódjanak, ahol a layout kezd 'megbomlani'.

Mit kell megadni a CSS-ben ezeknek a töréspontoknak a beállításához és alkalmazásához?