Контрольные точки (Breakpoints) в веб-дизайне

Контрольные точки (Breakpoints) в веб-дизайне: Полное руководство

В эпоху, когда пользователи заходят на сайты со смартфонов, складных телефонов, планшетов, ноутбуков и огромных 4K-мониторов, фиксированный дизайн окончательно умер. Чтобы сайт выглядел профессионально на любом устройстве, используют контрольные точки (breakpoints).

В этой статье мы простыми словами разберем, что такое брейкпоинты, какими они бывают и как правильно использовать их в дизайне и разработке.

Что такое контрольная точка (Breakpoint)?

Контрольная точка (breakpoint) — это конкретная ширина экрана (в пикселях), при достижении которой макет сайта меняется, чтобы подстроиться под новые размеры.

Представьте себе резиновую ленту с узлами. Вы растягиваете её: до определенного момента она просто становится шире, но когда вы доходите до «узла» (контрольной точки), структура макета перестраивается. Например:

Текст из одной колонки превращается в три.
Большое горизонтальное меню прячется в иконку «гамбургера».
Картинки уменьшаются или меняются местами.

Перестроение интерфейса на брейкпоинтах реализуется в коде с помощью CSS Media Queries (медиазапросов).

Стандартные размеры брейкпоинтов в 2026 году

Не существует единого мирового стандарта, который заставил бы всех использовать одинаковые пиксели. Однако популярные CSS-фреймворки (Bootstrap, Tailwind CSS) и дизайн-системы (Google Material Design) выработали оптимальные диапазоны, на которые ориентируется большинство дизайнеров.

Вот классическая сетка брейкпоинтов, покрывающая 99% устройств:

Размер экрана	Диапазон (в пикселях)	Тип устройств
xs (Extra small)	< 576px	Смартфоны в портретной ориентации
sm (Small)	576px — 767px	Большие смартфоны и смартфоны в альбомной ориентации
md (Medium)	768px — 991px	Планшеты (например, iPad)
lg (Large)	992px — 1199px	Ноутбуки и небольшие мониторы
xl (Extra large)	1200px — 1399px	Стандартные настольные компьютеры (Десктопы)
2xl (Huge)	>= 1400px	Большие 4K и Ultrawide мониторы

Ниже представлена единая сводная таблица актуальной статистики StatCounter по разрешениям экранов в РФ, разбитая по категориям устройств.

Категория устройства	Разрешение (в пикселях)	Доля рынка в РФ (в %)	Какие гаджеты сюда входят
💻 Десктопы / Ноутбуки (Общая доля в РФ: ~48%)	1920 × 1080	~32.0%	Самый массовый стандарт: Full HD мониторы ПК, ноутбуки 15.6"
	1536 × 864	~7.7%	Ноутбуки 14" с Windows-масштабированием 125%
	1366 × 768	~6.5%	Старые домашние ПК и бюджетные офисные ноутбуки
	2560 × 1440	~4.4%	Современные 2K мониторы (игровые и дизайнерские дисплеи от 27")
	Остальные десктопные	~49.4%	Длинный хвост (4K дисплеи, Mac-устройства, квадратные мониторы)
📱 Мобильные (Смартфоны)(Общая доля в РФ: ~49%)	414 × 896	~15.7%	iPhone XR / 11 / 11 Pro Max (очень популярные модели в России)
	393 × 873	~10.1%	Широкий пласт современных Android-смартфонов
	360 × 800	~9.8%	Устройства на Android (базовые линейки Samsung, Xiaomi)
	390 × 844	~6.0%	Линейка Apple: iPhone 12 / 13 / 14 / 15 и Pro-версии
	384 × 832	~3.5%	Смартфоны на Android
	360 × 780	~3.5%	Компактные смартфоны Android и старые модели
	Остальные мобильные	~51.4%	Огромное разнообразие сотен старых и бюджетных моделей

🌟 Универсальный ТОП брейкпоинтов для разработки

Название брейкпоинта	Ширина в пикселях	Что заменяет в реальности	Под какие устройства адаптируется макет
Mobile (Минимум)	320px	Абсолютный нижний порог	Самый старый и узкий стандарт (типа iPhone SE первого поколения). Если сайт не ломается на 320px — он не сломается нигде.
Mobile (Стандарт)	360px – 390px	Базовый мобильный холст в Figma	Охватывает более 70% современных смартфонов (все базовые iPhone 12/13/14/15/16 и подавляющее большинство Android-устройств).
Tablet (Планшеты)	768px	Классический iPad портретный	Стандартная точка перехода, на которой боковые меню прячутся в «гамбургер», а контент выстраивается в 1-2 колонки.
Laptop (Ноутбуки)	1024px – 1280px	Компактные экраны	Небольшие ноутбуки, старые квадратные мониторы и планшеты в горизонтальной ориентации.
Desktop (База)	1440px	Основной десктопный холст в Figma	Самый удобный размер для проектирования. Дизайн рисуется здесь, отлично сжимается до маленьких ноутбуков (1366px) и красиво центрируется на больших Full HD мониторах (1920px).

💡 Как применять этот топ в коде (CSS)

/* 1. По умолчанию стили пишутся для мобильных телефонов (ширина от 0px до 767px) */ body { font-size: 14px; } /* 2. Планшетный брейкпоинт (экраны от 768px до 1023px) */ @media (min-width: 768px) { body { font-size: 16px; } .menu { display: none; } /* прячем мобильное меню */ } /* 3. Ноутбуки (экраны от 1024px до 1439px) */ @media (min-width: 1024px) { .container { max-width: 960px; } /* контент больше не растягивается бесконечно */ } /* 4. Полноценный десктоп (экраны от 1440px и выше) */ @media (min-width: 1440px) { .container { max-width: 1200px; } .grid-layout { grid-template-columns: repeat(4, 1fr); } /* 4 товара в ряд */ }

Два подхода: Desktop-First против Mobile-First

При проектировании адаптивного сайта у дизайнера и фронтенд-разработчика есть два пути:

1. Mobile-First (Сначала мобильные)

Дизайн начинается с самого маленького экрана (смартфона) и по мере увеличения экрана «обрастает» деталями.

Плюсы: Интерфейс получается легким и не перегруженным. Это стандарт современной веб-разработки, так как более половины мирового трафика приходится на мобильные устройства.
В коде: Используется условие min-width (применять стили, если экран минимум X пикселей).

2. Desktop-First (Сначала компьютеры)

Дизайн рисуется для большого монитора, а затем элементы сжимаются, скрываются или перестраиваются под мобильные телефоны.

Плюсы: Подходит для сложных аналитических платформ, CRM-систем или сайтов с тяжелой графикой, где десктопная версия является основной.
В коде: Используется условие max-width (применять стили, если экран максимум X пикселей).

Главные правила работы с брейкпоинтами

Ориентируйтесь на контент, а не на устройства. Модели телефонов меняются каждый месяц. Если вы настроите брейкпоинт ровно под iPhone 15, сайт может «сломаться» на новом складном Samsung или Pixel. Смотрите, где именно ваш контент начинает выглядеть плохо при сжатии — там и ставьте точку.
Используйте относительные единицы (rem/em). Профессиональные разработчики переводят пиксели в rem. Это позволяет сайту корректно масштабироваться, если пользователь изменил размер шрифта в настройках своего браузера из-за слабого зрения.
Не забывайте про промежутки (Fluid Design). Брейкпоинты — это точки кардинальной смены макета. Между ними (например, от 768px до 992px) сайт должен плавно «резинить» (сжиматься и растягиваться за счет процентных значений ширины).