【发布时间】：2020-11-18 22:25:18
【问题描述】：
我目前正在开发一个 reactjs 网络应用程序。我想知道如何让它响应？每当我更改浏览器的大小时，我的所有组件都会变得混乱并相互流动。如何以简单的方式阻止这种情况发生？
【问题讨论】：
标签： css reactjs responsive-design
【发布时间】：2020-11-18 22:25:18
【问题描述】：
响应式是一种设计技术 - 没有库或工具会为您做这件事，因为您需要选择隐藏或调整哪些元素等。话虽如此，Bootstrap 这样的框架将使响应式设计更容易。
但您必须环顾四周并学习其中的技巧——这是一种不同的网页设计方法。
【讨论】：
-
bootstrap 如何让它变得更简单？只是好奇
-
它处理了大量的 CSS 样板/忙碌的工作，并施加了合理的默认值，使响应式设计更容易。如果你想学好响应式设计，实际上可能更容易在没有框架的情况下开始，一旦你掌握了速度，就可以继续前进。
“响应式设计”是开发中的重要部分/主题。在我看来，这是一个长期的学习过程。您构建的项目越多，您可以学到的东西就越多。
但是有很多 UI 库/框架可以让这变得更容易。幸运的是，他们每个人都有一个 React 版本。这是其中的一些-
如果您有时间了解更多有关响应式设计的信息，可以查看Responsive web design basics 的官方指南。
你可以遵循的一些常用技巧 -
- 尝试使用百分比 (%) 值或 vw 和 vh 设置布局的宽度和高度。
- 使用 flexbox 或网格。
- 使用 css 媒体查询并遵循标准断点。
- 如果可能，请在必要时为您的组件提供最大宽度/最大高度。
- 您可以构建一个具有
max-width: 1920的 BaseLayout 组件并用它包装其他小部件。因此，在一个非常大的屏幕中，您的应用始终包含 1920 像素的宽度。
希望这会有所帮助。
【讨论】：