Как сделать адаптивную вёрстку?
- Чем rem отличается от em и px?
- Что такое mobile-first?
Гибкая раскладка (flex, grid с fr и minmax), относительные единицы (rem, %, vw, clamp), медиазапросы по ширине и адаптивные изображения (srcset, sizes). Mobile-first — базовые стили для узкого экрана, расширения через @media (min-width: ...).
- rem — от размера шрифта корня, em — от шрифта родителя (накапливается), px — фиксированный
- Обязателен meta viewport: width=device-width, initial-scale=1
- clamp(1rem, 2.5vw, 2rem) — плавный размер без медиазапросов
А ещё Container queries — стили по размеру контейнера, а не окна
Подробно
Mobile-first: мобильный вариант проще, его стили — основа; на широких экранах добавляются колонки и отступы. CSS получается короче, а медленные мобильные устройства не загружают лишнее.
.layout { display: grid; gap: 16px; }
@media (min-width: 768px) {
.layout { grid-template-columns: 240px 1fr; }
}Единицы: rem — для шрифтов и отступов (уважает настройки пользователя); em — для размеров, зависящих от шрифта компонента; %, fr, vw — для раскладки; dvh — высота видимой области на мобильных с плавающей панелью браузера.
Изображения: max-width: 100%, srcset с разными размерами, <picture> для разных форматов, loading="lazy".
Container queries (@container) позволяют компоненту перестраиваться по ширине своего контейнера — удобно для переиспользуемых карточек.
Что хотят услышать
- Инструменты адаптивности.
- Mobile-first.
- Относительные единицы.
Проверьте себя
Один верный вариант. Подумайте, потом откройте ответ.
Показать варианты и ответ
- ✗Отдельный сайт для каждого устройства с определением модели по User-Agent
- ✗Фиксированная ширина 1200px для всех экранов, на телефоне — горизонтальная прокрутка
- ✓Гибкая раскладка, относительные единицы, медиазапросы; mobile-first
- ✗Только медиазапросы под точные размеры популярных моделей телефонов
Связанные вопросы
Разбор собеседования с sotto
После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.