Перейти к контенту

🎉 Material UI v5 is out! Head to the migration guide to get started.

Адаптивный пользовательский интерфейс

Макеты Material Design остаются одинаковыми вне зависимости от используемых платформ, сред выполнения и разрешений экрана благодаря использованию единообразной системы элементов и интервалов.

Адаптивные макеты в Material Design подстраиваются под все возможные размеры экрана. Для обеспечения адаптивности пользовательского интерфейса мы предоставляем следующие средства:

  • Grid: Адаптивная сетка макетов Material Design подстраивается под размер и ориентацию экрана, обеспечивая согласованность макетов.
  • Container: Контейнер центрирует ваш контент по горизонтали. Это базовый элемент всех макетов.
  • Breakpoints: API, позволяющий использовать контрольные точки в широком диапазоне контекстов.
  • useMediaQuery: Это хук медиа-запроса для React. Он отслеживает совпадения с медиа-запросом CSS.
  • Hidden: Быстро и оперативно управляет видимостью компонентов.