Что необходимо указать в CSS для настройки и применения данных брейкпоинтов?

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

Основные параметры медиазапросов:

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

Пример использования для настройки брейкпоинтов:

css

Часто используемые стратегии задания брейкпоинтов:

1. Mobile First: Сначала задаются стили для наименьших экранов, затем добавляются медиазапросы с min-width для более широких экранов.
2. Desktop First: Сначала задаются стили для больших экранов, затем добавляются медиазапрос