Задача

Требуется сделать текущую вёрстку сайта полностью автомасштабируемой. Суть: сайт свёрстан на HTML+CSS и идеально выглядит только на разрешении 1200 px. Нужно, чтобы на абсолютно всех экранах (включая мобильные устройства) дизайн оставался визуально идентичным эталонному макету.

Основные требования

  • Все элементы (шрифты, отступы, ширина, высота, межбуквенные интервалы) должны отображаться точно так же, как на 1200 px - без зума, отдаления или искажений.
  • Дизайн на каждом устройстве (от маленьких телефонов до студийных мониторов 4K) визуально повторяет макет 1200 px, при этом функциональность не ломается.
  • Существующие разрешения (мобильное, планшетное, 1900 px) либо используются для безупречной вёрстки, либо временно комментируются (но не удаляются), если мешают автомасштабированию.

Особые моменты

  • Обнаружено 7 мест, где вёрстка съезжает при переводе на процентные размеры (построена не на колонках). Эти элементы нужно корректно адаптировать для автомасштабирования.
  • После всех правок необходимо провести перепроверку по эталонному дизайну (Figmа), чтобы не нарушить утверждённую структуру.
  • В процессе работы не должны пострадать интерактивные элементы и текущий функционал сайта.

Критерии приёмки

  • На равном масштабе двух устройств (например, 1200 px и 1920 px) скриншоты сайта совпадают пиксель в пиксель по положению и размерам блоков.
  • Не появляется горизонтальный скролл, дефекты отступов, перекосов блоков или нарушений шрифтов.
  • Адаптации под любые экраны (от 320 px до 2560 px) не вносят потери качества и не «ломают» вёрстку при переключении ориентации.