Co je třeba uvést v CSS pro nastavení a použití těchto breakpointů?

@media mediální dotaz se používá. Uvnitř jsou stanoveny podmínky pro použití stylů založené na vlastnostech zařízení nebo oblasti zobrazení.

Hlavní parametry mediálních dotazů:

• width / height: Šířka / výška oblasti zobrazení.
• min-width / min-height: Minimální šířka / výška oblasti zobrazení.
• max-width / max-height: Maximální šířka / výška oblasti zobrazení.
• orientation: Orientace zařízení (portrait nebo landscape).

Příklad použití pro nastavení bodů zlomu:

/* Výchozí styly pro obrazovky menší než 768px */
body {
  font-size: 16px;
}

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

/* Bod zlomu pro obrazovky od 992px a výše */
@media (min-width: 992px) {
  body {
    font-size: 20px;
  }
}

Často používané strategie:

1. Mobile First: Nejprve jsou definovány styly pro nejmenší obrazovky, poté se přidávají mediální dotazy s min-width pro větší obrazovky.
2. Desktop First: Nejprve jsou styly pro velké obrazovky, poté se přidávají dotazy s max-width pro menší obrazovky.

Volba strategie závisí na projektu a preferencích.

Přibližné hodnoty bodů zlomu:

Zařízení	Rozsah šířky	Mediální dotaz (Mobile First)	Mediální dotaz (Desktop First)
Malé telefony	< 576px	Není k dispozici (základní styly)	@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)
Notebooky	>= 992px	@media (min-width: 992px)	@media (max-width: 1199.98px)
Desktopy	>= 1200px	@media (min-width: 1200px)	@media (max-width: 1399.98px)
Velké desktopy	>= 1400px	@media (min-width: 1400px)	Není k dispozici (základní styly)

Je důležité vybírat body zlomu na základě obsahu a rozvržení, nikoli pouze podle standardů zařízení. Měly by aktivovat tam, kde se rozvržení začíná 'lámout'.