Витрина, которая на десктопе выглядит идеально, на телефоне превращается в кашу: карточки наезжают друг на друга, фильтр занимает пол-экрана, кнопка «В корзину» уезжает за край. А ведь большинство покупателей приходят именно с мобильных. Проблема почти всегда в точках перелома — тех самых значениях ширины, на которых макет должен перестраиваться, но перестраивается не там или не так.
В этой статье разберём, как выбрать breakpoints для витрины интернет-магазина на 1С-Битрикс: сколько точек реально нужно, где их ставить для сетки каталога, карточки товара, умного фильтра и корзины, и как не сломать всё при обновлении шаблона. Тема тесно связана с общей стабильностью проекта — от вёрстки до качества данных, которые приходят обменом и которые мы приводим в порядок в рамках аудита и оптимизации 1С.
Коротко
- Breakpoint — это ширина, на которой ломается именно ваша вёрстка, а не число из чужого гайда.
- Для магазина хватает 3–4 опорных точек: узкий мобильный, крупный мобильный, планшет, десктоп.
- Собирайте mobile-first: компактный экран как база, расширение медиазапросами вверх.
- Умный фильтр на мобильных — оверлей по кнопке, а не боковая колонка; картинки — через srcset под ширину.
Что такое breakpoint и зачем он витрине
Breakpoint (точка перелома) — это значение ширины экрана, при переходе через которое макет меняет раскладку: число колонок в сетке, положение фильтра, размер шрифта, поведение меню. Технически это условие в медиазапросе CSS: «если ширина вьюпорта меньше или больше такого-то значения — применить другие стили».
Для интернет-магазина точки перелома важнее, чем для обычного сайта, потому что витрина — это плотная сетка однотипных элементов. Товарные карточки, фильтр, блок цены и наличия, корзина — всё это должно оставаться читаемым и кликабельным на любой ширине. Одна неверная точка перелома — и на популярной модели телефона карточки становятся слишком узкими, а кнопка заказа теряется. Это прямая потеря конверсии.
Почему нельзя копировать чужую сетку
Соблазн велик: взять «стандартные» 768 и 1024 из первого попавшегося фреймворка и на этом успокоиться. Но стандартные значения — это ориентир, а не готовое решение. Точка перелома должна стоять там, где ломается ваш контент, а он у каждого магазина свой.
Смотрите на конкретику своего каталога:
- Длина названий. Если товары называются длинно (модель, бренд, характеристики в одну строку), карточкам нужна большая минимальная ширина — сетку придётся сворачивать раньше.
- Плотность карточки. Цена, старая цена, наличие, кнопка, вариации — чем больше элементов, тем раньше карточке становится тесно.
- Фильтр. Много свойств в умном фильтре — боковая колонка шире, значит десктопная раскладка держится только на больших ширинах.
Правильный breakpoint находят эмпирически: плавно сужают окно браузера и отмечают ширину, на которой раскладка перестаёт выглядеть аккуратно. Вот туда и ставят точку перелома.
Mobile-first как база для магазина
Есть два подхода: mobile-first (сначала мобильный экран, стили расширяются вверх через min-width) и desktop-first (наоборот, вниз через max-width). Для интернет-магазина почти всегда выигрывает mobile-first, потому что основной трафик мобильный, а компактный экран проще расширять, чем «ужимать» перегруженный десктоп.
Практическая выгода mobile-first: базовые стили — самые лёгкие, и телефон не тащит десктопные правила, которые ему не нужны. Плюс это дисциплинирует дизайн — если сценарий покупки удобно работает на узком экране, на большом он тем более сложится. Desktop-first оправдан разве что на закрытых B2B-кабинетах, где менеджеры работают с ПК, но и там мобильную версию нельзя оставлять «на потом».
Опорные точки перелома: рабочий набор
Для типовой витрины на 1С-Битрикс достаточно небольшого набора опорных точек. Ниже — ориентир, от которого удобно отталкиваться, подстраивая под свой контент.
| Диапазон ширины | Устройство | Сетка каталога | Фильтр |
|---|---|---|---|
| до ~480px | Узкий мобильный | 1 колонка | Оверлей по кнопке |
| ~480–768px | Крупный мобильный | 2 колонки | Оверлей по кнопке |
| ~768–1024px | Планшет | 2–3 колонки | Оверлей или узкая колонка |
| от ~1024px | Десктоп | 3–4 колонки | Боковая колонка |
Это не догма, а стартовая сетка. Если карточки плотные, планшетную зону можно оставить на двух колонках; если названия короткие и картинки крупные — на узком мобильном допустима и одна широкая карточка. Важно другое: точек должно быть немного и каждая должна решать конкретную проблему раскладки.
Сетка каталога на разных ширинах
Сетка товаров — главный элемент, ради которого и настраивают адаптив. Современный подход — CSS Grid или Flexbox с автоматическим переносом, где число колонок задаётся на каждой точке перелома. Ключевые принципы:
- Минимальная ширина карточки. Задайте нижний предел, ниже которого карточка не сжимается, — тогда сетка сама решит, сколько колонок влезет.
- Ровные отступы. Промежутки между карточками (gap) должны масштабироваться, а не оставаться десктопными на телефоне.
- Одинаковая высота. Карточки в ряду выравниваются по высоте, чтобы кнопки «В корзину» стояли на одной линии.
- Без горизонтального скролла. На самом узком экране сетка не должна выходить за край — это классический баг адаптива.
В 1С-Битрикс сетку рисует компонент catalog.section (или его шаблон), поэтому правки вносят в шаблон компонента, а сами точки перелома — в стили шаблона сайта. О том, как поддерживать стабильность вёрстки при регулярных деплоях, мы писали в материале про CI/CD и деплой на Битрикс.
Карточка товара и адаптив
Детальная карточка товара — второй по важности экран после каталога, и у неё свои точки перелома. На десктопе галерея и блок покупки стоят в две колонки, на мобильном — складываются в одну: сначала картинка, потом название, цена, наличие, кнопка. Важно, чтобы блок с ценой и кнопкой заказа был доступен без долгой прокрутки.
Отдельная деталь — «липкая» панель покупки на мобильном: цена и кнопка «В корзину» фиксируются внизу экрана, пока пользователь листает описание и характеристики. Точка перелома для неё — та же граница мобильного, где двухколоночная раскладка становится одноколоночной. Табы с характеристиками, отзывами и доставкой на узком экране лучше превращать в аккордеон, чтобы не растягивать страницу.
Умный фильтр на мобильных
Умный фильтр (catalog.smart.filter) — самый капризный элемент адаптива. На десктопе он живёт в боковой колонке, но на планшете и мобильном эта колонка отнимает слишком много ширины у сетки товаров. Стандартное решение — превратить фильтр в панель-оверлей, которая открывается по кнопке «Фильтр» и закрывается после применения.
На что обратить внимание при адаптации фильтра:
- Кнопка вызова. Заметная кнопка «Фильтр» со счётчиком выбранных параметров вверху выдачи.
- Прокрутка внутри панели. Список свойств прокручивается независимо, а кнопка «Показать» всегда видна внизу.
- Мгновенный отклик. Показ количества товаров под выбранные условия помогает не «проваливаться» в пустую выдачу.
Граница, ниже которой фильтр становится оверлеем, обычно совпадает с планшетной точкой перелома. Определяют её так же, как и всё остальное: смотрят, при какой ширине боковая колонка начинает мешать сетке товаров.
Корзина и оформление заказа
Корзина и оформление — узкое горлышко конверсии, и адаптив здесь критичен. На десктопе таблица корзины с колонками «товар — цена — количество — сумма» выглядит естественно, но на телефоне такая таблица не помещается. Точка перелома должна превращать каждую строку корзины в компактную карточку: картинка, название, цена и степпер количества друг под другом.
В оформлении заказа (sale.order.ajax) на мобильном формы вытягиваются в одну колонку, поля делаются крупными под палец, а итоговая сумма и кнопка «Оформить» фиксируются внизу. Чем меньше горизонтальной прокрутки и мелких элементов на этом экране, тем выше шанс, что заказ дойдёт до конца.
Картинки, srcset и скорость
Брейкпоинты вёрстки бессмысленны, если на телефон грузятся десктопные картинки в полном разрешении. Адаптив изображений идёт рука об руку с точками перелома: атрибуты srcset и sizes подсказывают браузеру, какого размера картинку взять под текущую ширину. Это напрямую улучшает LCP — метрику скорости загрузки главного контента.
Практика для витрины: генерируйте несколько размеров изображений товара, отдавайте маленькие превью в сетку каталога и крупные — в галерею карточки, используйте современные форматы. А стабильная сетка без «прыжков» при смене раскладки снижает CLS. Скорость витрины держится и на инфраструктуре — про это мы подробно рассказывали в статьях про хостинг и BitrixVM и безопасность REST и вебхуков.
Breakpoints в шаблоне 1С-Битрикс
Технически точки перелома живут в CSS шаблона сайта. Собрать адаптив в Битрикс правильно — значит не трогать ядро и типовые файлы, а работать в своём шаблоне.
- Разберитесь в текущей сетке. Изучите, какие медиазапросы уже есть в шаблоне и типовых компонентах, чтобы не конфликтовать с ними.
- Заведите переменные точек. Опишите брейкпоинты как CSS-переменные или переменные препроцессора, чтобы менять их в одном месте.
- Правьте шаблоны компонентов. Раскладку каталога, карточки и фильтра меняйте в скопированных шаблонах компонентов, а не в ядре.
- Держите стили в шаблоне сайта. Медиазапросы — в собственных CSS-файлах шаблона, чтобы они пережили обновления платформы.
- Проверяйте на реальном ассортименте. Тестируйте не на демо-товарах, а на настоящих данных из 1С — с длинными названиями и разными единицами.
Такой порядок бережёт проект от типичной беды — когда после обновления решения адаптив «разъезжается», потому что правки лежали в файлах ядра. Про организацию обновляемого кода мы писали в статье про разработку модулей Битрикс.
Данные из 1С и «нестандартные» товары
Адаптив часто ломается не на «средних» товарах, а на краевых случаях: сверхдлинное название, отсутствующая картинка, необычная единица измерения, товар с десятком торговых предложений. Все эти данные приходят обменом из 1С, и если учётная система отдаёт «грязь», вёрстка на узком экране это обнажает.
Поэтому адаптив и качество данных — две стороны одной задачи. Прежде чем ловить баги вёрстки, стоит убедиться, что каталог наполняется корректно: единообразные названия, заполненные свойства, корректные остатки. Навести порядок в обмене и автоматизировать выгрузку помогает услуга автоматизации на 1С, а связку витрины со складом и продажами — автоматизация продаж и склада на 1С. Чистые данные — половина успеха аккуратной адаптивной витрины.
Частые ошибки адаптива
- Копируют чужие брейкпоинты. Берут «стандартные» значения, не проверив, где ломается собственный контент.
- Слишком много точек перелома. Десяток брейкпоинтов под каждую модель телефона — ад в поддержке без пользы для покупателя.
- Фильтр остаётся колонкой на мобильном. Боковая колонка съедает ширину, сетка товаров становится узкой полоской.
- Десктопные картинки на телефоне. Нет srcset — тяжёлые изображения бьют по LCP и трафику.
- Горизонтальный скролл. На самом узком экране элемент вылезает за край и появляется прокрутка вбок.
- Тестируют на демо-товарах. Реальные длинные названия и «нестандартные» позиции из 1С ломают вёрстку в бою.
- Правки в ядре. Медиазапросы лежат в типовых файлах и слетают при обновлении платформы.
Чек-лист внедрения
- Опорные точки определены. 3–4 брейкпоинта подобраны по своему контенту, а не скопированы.
- Mobile-first собран. Базовые стили — мобильные, расширение вверх через min-width.
- Сетка каталога проверена. Число колонок меняется чисто, без горизонтального скролла и разной высоты карточек.
- Карточка адаптирована. Одноколоночная раскладка, доступная цена и кнопка, аккордеон для табов.
- Фильтр — оверлей на мобильном. Кнопка вызова со счётчиком, независимая прокрутка, видимая кнопка «Показать».
- Корзина и оформление удобны. Строки-карточки вместо таблицы, крупные поля, фиксированная кнопка заказа.
- Картинки адаптивны. srcset/sizes и современные форматы под разные ширины.
- Проверено на реальных данных и устройствах. Тест на настоящем ассортименте из 1С и живых телефонах.
Вывод
Адаптивные точки перелома — это не магические числа из чужого фреймворка, а места, где ломается именно ваша витрина. Для интернет-магазина на 1С-Битрикс достаточно трёх-четырёх опорных точек, собранных mobile-first и подобранных по реальному контенту: сетка каталога, карточка, фильтр-оверлей и удобная корзина на каждом экране.
Держите правки в шаблоне сайта, а не в ядре, связывайте брейкпоинты с адаптивными картинками ради скорости и тестируйте на настоящих данных из 1С. Тогда витрина будет одинаково удобной и на телефоне, и на десктопе — а это прямой вклад в конверсию и повторные заказы.
