Что необходимо указать в 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 для более узких экранов.

Выбор стратегии зависит от проекта и предпочтений.

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

Важно выбирать брейкпоинты, исходя из контента и макета, а не стандартов устройств. Они должны срабатывать там, где макет начинает 'ломаться'.