Как делается мобильная и планшетная адаптация лендингов

Что проверяют

Есть ли у вас система, а не набор @media под конкретные айфоны. Лендинг обычно приходит из Figma в двух или трёх макетах, и интервьюеру интересно, что вы делаете между ними. Следом часто спрашивают про картинки и скорость на мобильном интернете.

Как отвечать

Каркас из того, что реально делается на проекте:

• viewport: <meta name="viewport" content="width=device-width, initial-scale=1">, без него мобильный браузер отрисует страницу как десктопную и уменьшит;
• mobile first: базовые стили под узкий экран, расширение через @media (min-width: ...). Брейкпоинты берутся из макета и контента, там, где ломается вёрстка, а не из списка телефонов;
• резиновая раскладка: Grid и Flexbox с minmax(), auto-fit, flex-wrap, чтобы между брейкпоинтами ничего не разъезжалось;
• типографика: clamp() для плавного масштабирования, например font-size: clamp(1.5rem, 4vw, 3rem);
• container queries: @container для блоков, которые живут в колонках разной ширины, поддерживаются всеми актуальными браузерами;
• картинки: srcset и sizes, <picture> для другой кадровки на мобиле, loading="lazy" ниже первого экрана и fetchpriority="high" для главного изображения;
• мобильные мелочи: высота первого экрана через svh или dvh вместо 100vh, кликабельные зоны не меньше 44px, @media (hover: hover) для эффектов наведения.

Проверка: режим устройств в DevTools для быстрого прохода, затем реальные iOS и Android, потому что Safari ведёт себя по-своему. Плюс Lighthouse или PageSpeed на мобильном профиле: для лендинга LCP критичен.

Где спотыкаются

Пишут брейкпоинты под конкретные модели (375, 390, 414) и получают сломанную вёрстку на всём, что между ними.

Ставят полям ввода шрифт меньше 16px. iOS Safari при фокусе увеличивает страницу, и форма заявки, ради которой делался лендинг, начинает прыгать.

Прячут на мобиле тяжёлые блоки через display: none. Картинки из <img> браузер всё равно скачивает, и страница легче не становится.