Material ui，桌面到移动响应式过渡的布局组件答案

【问题标题】：material ui, layout component for desktop to mobile responsive transitionMaterial ui，桌面到移动响应式过渡的布局组件
【发布时间】：2020-04-01 20:54:25
【问题描述】：

我正在编写一个带有材质 ui 的单个 Web 应用程序，它需要响应式，但我不知道哪个是我必须分配主组件的控件，如果它是一个网格或一个盒子。

下图显示了 md,lg,xl 中的主要组件排列

下图显示宽度

在网上我发现了许多复杂且很难理解的布局，但没有找到一个基本的例子。有些人喜欢“材质 ui 响应傻瓜”。

手机版，Appbar和Sidenav之间会有一个breakpage，两者都会占据全高，第二页的Map会填满屏幕。

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

我通过 MU Grids 和媒体查询为您完成了这项工作，如果您有任何问题，请提出。我随时准备提供帮助。这是代码框链接。让我知道它是否对您有帮助。 https://codesandbox.io/s/charming-shirley-oq6l5

【讨论】：

【解决方案2】：

显示我的代码框来回答您的问题：https://codesandbox.io/s/amazing-sound-1nj87 它会正确显示 md lg xl 的布局。对于 xs 和 sm 屏幕，sidenav 和地图采用 full height，并在 sidenav 和 appBa 之间设置一个 break pager

【讨论】：

【解决方案3】：

多亏了两者，它解决了我需要的主要部分。

还需要实现换页。我忘了提到地图将是 React-Leaflet，所以需要在移动版的地图上实现一个襟翼按钮。

该按钮用于向上滚动，因为地图区域内的任何手指移动只会影响地图内容。不要在滚动中生效。

要实现的另一件事是分页概念：

中断页面的行为就像您在演示模式下看到 pdf 并按下键盘按钮 Repag - Avpag，它会更改所有内容，并且永远不会看到一半顶部和一半向下。

问候

【讨论】：