如何使用ReactJS使网站响应Web和移动设备

Question

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

Answer 1

有几种使用ReactJS创建响应式Web应用程序的方法。除了使用Bootstrap之类的整个框架之外，我还想创建一个带有样式化组件的响应式网格视图，这简直令人难以置信。

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

它将有十二个可能的列 一列可以跨越1至12列的宽度。 如果总宽度小于768像素，则所有列将垂直堆叠。 在下面的屏幕快照中，您将看到我创建了一个名为Row的组件，该组件需要清除列后的浮点数。然后，我添加了一个Column组件，默认情况下它具有float：设置为left，宽度为100％（您记得移动优先吗？）。