How to make Website responsive for web and mobile using ReactJS

Question

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

Answer 1

There are several approaches on creating responsive web apps with ReactJS. Apart from using whole frameworks like Bootstrap, I wanted to create a responsive grid view with styled-components, which was amazingly painless.

Creating the basic grid view with styled-components As a starter, we will build the exact same grid, like I covered in the last section:

It will have twelve possible columns A column can span across the width of 1–12 columns. If the total width is smaller than 768px, all of the columns will stack vertically. In the following screenshot you will see, that I created a component called Row which is needed to clear the float after the columns. Then I added a Column component, which has by default float: left set, and a width of 100% (mobile first, you remember?).