Адаптивная вёрстка
Тема дорожной карты · Frontend разработчик
Адаптивный CSS-дизайн — это практика создания веб-интерфейсов, которые плавно подстраиваются под любой размер экрана — от мобильных телефонов до широких десктопных мониторов — с помощью CSS3-техник без обслуживания отдельных версий страниц. Основу адаптивного дизайна составляют CSS-медиазапросы (@media (max-width: 768px) { ... }), применяющие разные стили в контрольных точках, в сочетании с адаптивными макетами на базе CSS Flexbox, CSS Grid, процентных значений ширины и функции clamp() для плавной типографики. Мета-тег <meta name="viewport" content="width=device-width, initial-scale=1"> является обязательным условием: он предписывает мобильным браузерам использовать физическую ширину устройства, а не виртуальный viewport шириной 980 пикселей. Адаптивный CSS-дизайн напрямую влияет на Core Web Vitals — в частности на Cumulative Layout Shift (CLS) и мобильные оценки Lighthouse, — что делает его обязательным навыком для любого frontend-разработчика, работающего над продакшн-приложениями.
Как это работает
Адаптивная вёрстка стилизует DOM через селекторы (какие элементы), свойства (что менять), каскад (правила приоритета + наследования: inline > id > class > tag, !important перебивает всё). Layout-движки: normal flow, flexbox (1D), grid (2D), float (legacy). Box model: content + padding + border + margin. Современные фичи: custom properties (--var), @layer, container queries, :has(). Specificity + каскад — главный источник багов "почему не применяется?".
Когда применять
Flexbox — для 1D-раскладок (ряд или колонка элементов); Grid — для 2D-раскладок (ряды + колонки). Custom properties — для темизации + консистентности (--primary-color: #007aff). @layer — для организации specificity в больших проектах. Tailwind/UnoCSS или ванильный CSS — на вкус команды; оба работают; важна консистентность. Mobile-first media queries (min-width: не max-width:) композируются лучше.
Типичные ошибки
Ловушки Адаптивная вёрстка: !important повсюду ("фикс, который всегда работает" — пока два !important не столкнутся, и исходный баг возвращается умноженным); pixel-perfect раскладки ломаются на другом шрифте/размере (используйте em/rem для типографии); войны z-index, когда реальный фикс — рефакторинг stacking context; стили в JS inline (lock-in, нет темизации). Прочтите MDN про каскад один раз.