reactjs - 如何使用 ReactJS 使网站响应 web 和移动

Question

我是 Reactjs 的新手，所以任何人都可以帮助我为桌面和移动视图做出响应式设计。

标签： reactjs

Answer 1

使用 ReactJS 创建响应式 Web 应用程序有多种方法。除了使用像 Bootstrap 这样的整个框架之外，我还想创建一个带有样式组件的响应式网格视图，这非常轻松。

使用 styled-components 创建基本的网格视图 首先，我们将构建完全相同的网格，就像我在上一节中介绍的那样：

它将有十二个可能的列 一列可以跨越 1-12 列的宽度。如果总宽度小于 768px，则所有列将垂直堆叠。在以下屏幕截图中，您将看到，我创建了一个名为 Row 的组件，用于清除列之后的浮动。然后我添加了一个 Column 组件，它默认设置为 float: left ，宽度为 100%（你还记得吗？）。