Адаптивность
Вопрос
Как ты делаешь адаптивную вёрстку?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
mobile-first: базовые стили для узкого, медиазапросы вверх
точки останова от контента, а не от моделей устройств
часть раскладок решается без медиазапросов: auto-fit, minmax, clamp
контейнерные запросы адаптируют компонент, а не окно
относительные единицы и clamp для типографики
проверять не только ширину, но и масштаб шрифта и клавиатуру на мобильном
Что могут спросить следом
- Чем container queries лучше медиазапросов
- Почему 100vh ломается на мобильных
- Как подобрать точки останова
Разбор
Базово mobile-first: пишем узкий вариант без запросов, расширяем через min-width.
Так на слабых устройствах не применяется лишнее.
Точки останова выбираются по тому, где ломается контент, а не по списку моделей iPhone.
Значительную часть раскладок сегодня можно сделать без медиазапросов:
repeat(auto-fit, minmax(240px, 1fr)) для сетки, clamp() для типографики, flex-wrap
для панелей. Контейнерные запросы (@container) - качественный скачок: компонент
подстраивается под свой контейнер, а не под окно, и потому переиспользуется в сайдбаре
и на всю ширину.
Проверять стоит не только ширину: увеличенный системный шрифт, горизонтальную ориентацию
и всплывающую клавиатуру на мобильном, из-за которой 100vh съезжает - отсюда 100dvh.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.