responsive-design

Responsive Design — практический навык William Shobson для интерфейсов, которые должны адаптироваться к разным размерам и контекстам экрана. В его области находятся mobile-first layouts, CSS Grid и Flexbox, container queries, fluid typography и fluid spacing, responsive images, адаптивная навигация, responsive tables и паттерны дизайн-систем. Главная идея источника — начинать с компактного мобильного представления, а затем усиливать его для больших экранов, сохраняя компонентную структуру и проверяемое поведение. При выборе breakpoint источник предлагает смотреть на содержимое, а не на названия устройств. Такой подход помогает поставить границу там, где конкретный layout перестаёт читаться или начинает ломаться, вместо привязки к условному набору телефонов и ноутбуков. Для компонентов рекомендуются container queries, потому что их поведение может зависеть от ширины родительского контейнера, а не только от viewport. Для типографики и отступов предпочтительны fluid values, чтобы масштабирование происходило плавно и не сводилось к множеству жёстко зафиксированных размеров. Набор рекомендаций охватывает не только сетку. Responsive images должны сохранять пригодный размер и соотношение сторон; адаптивная навигация должна учитывать доступное пространство; таблицам нужен отдельный сценарий для узкого экрана. В логике CSS следует предпочитать logical properties с inline и block, что поддерживает международные варианты направления и раскладки. Для интерактивных элементов на мобильных экранах источник указывает минимальный touch target 44 на 44 пикселя. Эти правила дают набор конкретных проверок для компонента, а не только общую формулировку «сделать mobile-friendly». Перед выпуском навык рекомендует тестировать реальные устройства: симуляторы не ловят все проблемы, возникающие в настоящих браузерах и touch-контексте. В первую очередь стоит искать горизонтальный overflow, фиксированные ширины, проблемы с 100vh на мобильных браузерах, слишком маленький текст, маленькие touch targets, растянутые или сжатые изображения и ошибки z-index у overlay-элементов. Для layout подходят CSS Grid и Flexbox, но сами инструменты не гарантируют корректность: нужно проверить фактический контент, переходы между breakpoint и поведение вложенных компонентов. Ограничение навыка в том, что он задаёт паттерны адаптивной верстки, а не готовый универсальный набор breakpoint или компонентную библиотеку. Конкретные значения нужно выбирать по содержимому, а результаты проверять на реальных экранах. Container queries, fluid typography и logical properties полезны только при согласованной структуре CSS; они не исправят overflow, неверное соотношение сторон или слишком маленькую область нажатия без отдельной проверки. Карточка подходит для планирования и ревью responsive UI, но не заменяет ручную проверку браузеров, устройств и доступности.