Как сделать ПК-версию сайта: адаптивный макет

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

Когда нужен адаптив, а когда отдельная версия

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

• Один контент и одна форма: используйте адаптивный макет.
• На ПК нужны дополнительные колонки, но те же действия: меняйте сетку через CSS.
• На телефоне часть функций недоступна по смыслу: сначала проверьте, можно ли упростить общий сценарий.
• Отдельный поддомен только ради ширины экрана обычно не нужен.

Широкий экран не означает, что текст нужно растянуть от края до края. Дополнительное место используют для сетки и воздуха, а не для длинных строк.

Начните с мобильной основы

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

1. Откройте мобильную страницу и убедитесь, что порядок блоков логичен.
2. Ограничьте ширину длинного текста.
3. Выберите момент, когда карточкам уже тесно в одной колонке.
4. Добавьте media query и расширьте сетку.
5. Настройте наведение и видимый фокус для интерактивных элементов.
6. Проверьте промежуточные ширины, а не только два крайних снимка.

.page {
  width: min(100% - 32px, 1180px);
  margin-inline: auto;
}
.cards { display: grid; gap: 24px; }

@media (min-width: 760px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1080px) {
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

Значения в примере не являются универсальным стандартом. Изменяйте ширину окна и ставьте точку там, где элементы начинают ломаться или появляется бесполезное пустое место. Если мобильная основа ещё не готова, сначала используйте инструкцию по мобильному сайту.

Что изменить именно для компьютера

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

• Шапка не занимает слишком большую высоту.
• Основной текст имеет ограниченную ширину и удобную длину строки.
• Карточки заполняют сетку без растянутых изображений.
• Кнопки имеют состояния hover, focus-visible и active.
• Выпадающее меню открывается не только наведением.
• Таблицы помещаются, прокручиваются внутри блока или перестраиваются.
• Форма сохраняет подписи и порядок полей.

Для сложной шапки используйте отдельный разбор адаптивного меню. Не переносите мобильное меню на ПК автоматически, если основные разделы помещаются в обычную навигацию.

По теме: Как сделать разрешение сайта: адаптивный экран в 2026

Проверьте макет в DevTools

Режим устройства в Chrome DevTools помогает приблизительно проверить область просмотра, скорость сети и нагрузку процессора, но Google прямо называет его приближением, а не настоящим устройством. Ограничения описаны в официальной документации Chrome.

1. Откройте DevTools и включите панель устройств.
2. Выберите Responsive и медленно меняйте ширину.
3. Отмечайте места горизонтальной прокрутки и скачки блоков.
4. Вернитесь в обычный режим и проверьте клавиатуру и мышь.
5. Откройте страницу на реальном телефоне и ноутбуке.
6. Повторите основной путь: меню, форма, отправка и подтверждение.

Диагностика по симптому

Если страница выглядит как узкая полоска на ПК, ограничение ширины поставлено на весь макет, а не на текст. Если изображения растянулись, проверьте max-width, aspect-ratio и способ кадрирования. Если появляется горизонтальная прокрутка, временно добавьте контур блокам и найдите элемент шире области просмотра.

• Текст слишком длинными строками: ограничьте ширину текстовой колонки.
• Карточки разной высоты: выровняйте структуру и не обрезайте важный текст фиксированной высотой.
• Меню пропадает между ширинами: проверьте пересечение media queries.
• Наведение работает, клавиатура нет: добавьте :focus-visible и обработку нажатия.
• Таблица ломает страницу: дайте ей собственную прокрутку или измените представление.
• Модальное окно меньше или больше экрана: ограничьте размеры и разрешите внутреннюю прокрутку.

По теме: Как сделать на сайте список: HTML, CSS и доступность

Приёмочный чек-лист ПК-версии

Готовность проверяется не красивым снимком, а рабочим сценарием. Откройте прямую ссылку, найдите нужный раздел, заполните форму, исправьте ошибку и получите подтверждение. Затем повторите всё без мыши.

• Нет горизонтальной прокрутки у всей страницы.
• Главный заголовок и действие видны без поиска по экрану.
• Текст не растянут на всю ширину монитора.
• Все ссылки и кнопки доступны клавиатурой.
• Модальные окна закрываются понятным способом.
• Изображения не искажены.
• Промежуточные ширины не создают пустых или наложенных блоков.
• Реальный ноутбук показывает тот же результат, что и DevTools.

Когда отдельная ПК-версия не подходит

Не создавайте второй сайт только потому, что конструктор плохо растянул мобильный макет. Сначала исправьте сетку и компоненты. Отдельный продукт увеличит объём тестирования и вероятность разных данных. Если проблема в слабом компьютере, отдельная версия также не поможет: оптимизируйте общую загрузку.

Общую проверку структуры, скорости и понятности удобно завершить по чек-листу хорошего сайта.

Частые вопросы

Нужен ли отдельный адрес для ПК?

Обычно нет. Один адаптивный URL проще поддерживать и проверять.

Как выбрать ширину переключения?

Меняйте окно и ставьте точку там, где содержанию становится тесно или свободное место можно полезно занять.

Можно ли скрывать блоки на телефоне?

Только если они не нужны для результата. Обязательное действие и важную информацию нельзя делать доступными лишь на ПК.

Достаточно ли проверки в DevTools?

Нет. Это приближение. Финальный путь повторяют хотя бы на одном реальном телефоне и компьютере.