Какво трябва да се посочи в CSS за настройка и прилагане на тези точки на прекъсване?

Използва се медийният заявка @media. В нея се задават условия за прилагане на стилове, базирани на характеристиките на устройството или областта за преглед.

Основните параметри на медийните заявки:

• width / height: Ширина / височина на областта за преглед.
• min-width / min-height: Минимална ширина / височина на областта за преглед.
• max-width / max-height: Максимална ширина / височина на областта за преглед.
• orientation: Ориентация на устройството (portrait или landscape).

Пример за използване за настройка на точки на прекъсване:

/* Стилове по подразбиране за екрани по-малки от 768px */
body {
  font-size: 16px;
}

/* Точка на прекъсване за екрани от 768px до 991px */
@media (min-width: 768px) and (max-width: 991px) {
  body {
    font-size: 18px;
  }
}

/* Точка на прекъсване за екрани от 992px нагоре */
@media (min-width: 992px) {
  body {
    font-size: 20px;
  }
}

Често използвани стратегии:

1. Mobile First: Първо се дефинират стиловете за най-малките екрани, след това се добавят медийни заявки с min-width за по-широки екрани.
2. Desktop First: Първо се дефинират стиловете за големите екрани, след това се добавят заявки с max-width за по-тесни екрани.

Изборът на стратегия зависи от проекта и предпочитанията.

Стандартни стойности за точки на прекъсване (приблизително, зависят от рамката или споразумението):

Устройство	Диапазон на ширината	Медийна заявка (Mobile First)	Медийна заявка (Desktop First)
Малки телефони	< 576px	Няма (основни стилове)	@media (max-width: 575.98px)
Телефони	>= 576px	@media (min-width: 576px)	@media (max-width: 767.98px)
Таблети	>= 768px	@media (min-width: 768px)	@media (max-width: 991.98px)
Лаптопи	>= 992px	@media (min-width: 992px)	@media (max-width: 1199.98px)
Десктопи	>= 1200px	@media (min-width: 1200px)	@media (max-width: 1399.98px)
Големи десктопи	>= 1400px	@media (min-width: 1400px)	Няма (основни стилове)

Важно е да избирате точките на прекъсване въз основа на съдържанието и макета, а не само на стандартите за устройства. Те трябва да се активират там, където макетът започва да 'се чупи'.