Гибкая раскладка (flex, grid с fr и minmax), относительные единицы (rem, %, vw, clamp), медиазапросы по ширине и адаптивные изображения (srcset, sizes). Mobile-first — базовые стили для узкого экрана, расширения через @media (min-width: ...).
А ещё Container queries — стили по размеру контейнера, а не окна
Так подсказку видит пользователь sotto на живом собеседовании — за пару секунд, пока вы думаете вслух.
Mobile-first: мобильный вариант проще, его стили — основа; на широких экранах добавляются колонки и отступы. CSS получается короче, а медленные мобильные устройства не загружают лишнее.
sotto.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) позволяют компоненту перестраиваться по ширине своего контейнера — удобно для переиспользуемых карточек.
sotto слышит вопрос интервьюера и показывает короткий ответ и план, как в блоке «Коротко». Оставьте контакт — пришлём доступ и промокод.