Čo je potrebné uviesť v CSS na nastavenie a použitie týchto breakpointov?

Používajú sa mediálne dopyty @media. Vnútri nich sa stanovujú podmienky na použitie štýlov založené na vlastnostiach zariadenia alebo oblasti zobrazenia.

Hlavné parametre mediálnych dopytov:

• width / height: Šírka/výška oblasti zobrazenia.
• min-width / min-height: Minimálna šírka/výška oblasti zobrazenia.
• max-width / max-height: Maximálna šírka/výška oblasti zobrazenia.
• orientation: Orientácia zariadenia (portrait alebo landscape).

Príklad použitia na nastavenie breakpointov:

/* Predvolené štýly pre obrazovky menšie ako 768px */
body {
  font-size: 16px;
}

/* Breakpoint pre obrazovky od 768px do 991px */
@media (min-width: 768px) and (max-width: 991px) {
  body {
    font-size: 18px;
  }
}

/* Breakpoint pre obrazovky od 992px a viac */
@media (min-width: 992px) {
  body {
    font-size: 20px;
  }
}

Často používané stratégie nastavenia breakpointov:

1. Mobile First: Najskôr sa nastavujú štýly pre najmenšie obrazovky, potom sa pridávajú mediálne dopyty s min-width pre širšie obrazovky.
2. Desktop First: Najskôr sa nastavujú štýly pre veľké obrazovky, potom sa pridávajú mediálne dopyty s max-width pre užšie obrazovky.

Výber stratégie závisí od projektu a preferencií.

Štandardné hodnoty breakpointov (približné, závisí od frameworku alebo dohody):

Zariadenie	Rozsah šírky	Mediálny dopyt (Mobile First)	Mediálny dopyt (Desktop First)
Malé telefóny	< 576px	Chýba (základné štýly)	@media (max-width: 575.98px)
Telefóny	>= 576px	@media (min-width: 576px)	@media (max-width: 767.98px)
Tablety	>= 768px	@media (min-width: 768px)	@media (max-width: 991.98px)
Notebooky	>= 992px	@media (min-width: 992px)	@media (max-width: 1199.98px)
Desktopové počítače	>= 1200px	@media (min-width: 1200px)	@media (max-width: 1399.98px)
Veľké desktopové počítače	>= 1400px	@media (min-width: 1400px)	Chýba (základné štýly)

Dôležité je vyberať breakpointy na základe obsahu a rozloženia, nie podľa štandardov zariadení. Mali by sa aktivovať tam, kde rozloženie začína 'lámuť'.