# 响应式 UI

<p class="description">Material Design 布局鼓励通过使用统一的元素和间距来实现跨平台、跨环境、不同屏幕尺寸下的一致性。</p>

Material Design 中的[响应式布局](https://material.io/design/layout/responsive-layout-grid.html)可适配任何可能的屏幕尺寸。 我们提供以下工具以实现响应式 UI：

- [Grid](/components/grid/)：Material Design 的响应式网格布局可以适应屏幕的尺寸和方向，确保布局之间的一致性。
- [Container](/components/container/)：容器可以将您页面的内容水平居中。 它是最基本的布局元素。
- [Breakpoints](/customization/breakpoints/)：它的 API 让您可以在不同的语义环境中使用断点。
- [useMediaQuery](/components/use-media-query/) ：这是 React 的 CSS 媒体查询 hook。 它监控着与 CSS 媒体查询的匹配结果。
- [Hidden](/components/hidden/)：使用我们隐藏的实用程序来快速并响应式地切换元素的显隐。