Skip to content
PПромтбук
RUEN
02Дизайн

Адаптив

Брейкпойнты, mobile-first, touch vs hover, плотность контента.

7промтов
Сложность:Теги:

Стратегия брейкпойнтов

Не «3 устройства», а содержательные точки. Где менять layout и зачем.

responsivebreakpointslayout
Начальный15-30 мин

Mobile-first рефакторинг

Перевод desktop-first дизайна на mobile-first без полной переделки.

responsivemobile-firstrefactor
Средний30-60 мин

Touch vs hover паттерны

Что работает с пальцем, что с курсором — и как сделать чтобы работало везде.

responsivetouchhover
Начальный15-30 мин

Mobile-first rethink: переосмыслить desktop-макет

Не просто 'сжать' desktop — пересмотреть IA, навигацию и прогрессивно усложнить от мобильного к большому экрану.

responsivemobile-firstia
Продвинутый1-2 часа

Container queries: где @container побеждает @media

Когда переходить с viewport-брейкпойнтов на контейнерные. Конвенции именования, fallback, реальные сценарии.

responsivecontainer-queriescss
Продвинутый30-60 мин

Fluid typography через clamp(): формула и edge cases

Шрифты и spacing, которые сами масштабируются без брейкпойнтов. Как считать preferred, что НЕ клампить, accessibility.

responsivetypographyclamp
Начальный15-30 мин

Density modes: переключатель comfortable / cozy / compact

Как у Linear и Notion: переключатель плотности интерфейса. Token strategy, что НЕ масштабировать, сохранение preference.

responsivedensitytokens
Продвинутый30-60 мин
7 из 7