Files
react-test/docs/data/material/guides/responsive-ui/responsive-ui.md
how2ice 005cf56baf
Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
init project
2025-12-12 14:26:25 +09:00

939 B

Responsive UI

Material Design layouts encourage consistency across platforms, environments, and screen sizes by using uniform elements and spacing.

Responsive layouts in Material Design adapt to any possible screen size. We provide the following helpers to make the UI responsive:

  • Grid: The Material Design responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts.
  • Container: The container centers your content horizontally. It's the most basic layout element.
  • Breakpoints: API that enables the use of breakpoints in a wide variety of contexts.
  • useMediaQuery: This is a CSS media query hook for React. It listens for matches to a CSS media query.