通过 CSS 的响应式 React 应用程序

Question

现在，我的应用在更大的屏幕上看起来几乎完全符合我的要求。 https://imgur.com/a/MCe5D - 当你缩小屏幕尺寸时，两列（趋势向上和向下趋势）将越来越近，直到它们几乎接触，这很棒。但是在那种情况下，当他们不再靠近时，我希望将 Trending Down 及其内容移到 Trending Up 列下方，以更加适合移动设备。 Here's a pen showing the area that is being affected.

//The whole area surrounding the two columns
.playersColumns {
display: flex;
flex-direction: row;
justify-content: space-evenly;
padding-left: 150px;
padding-right: 150px;
padding-top: 25px;
overflow-y: scroll;
}

//The two columns of player info
.playersBody {
overflow: auto;
flex-direction: column;
justify-content: center;
flex-wrap: wrap;
min-width: 255px;
}

那支笔不是很有用，但它显示了我的确切代码以及哪些标签在哪里。我尝试将第二列的玩家信息和趋势标题放在第一列中，但这只是使它成为一个大列（这是我想要的，但只有在屏幕缩小时）

感谢任何帮助 — 如果有更好的方法来显示代码或布局，请告诉我。

Answer 1

我建议查看媒体查询。 Here 是一个向您展示基本知识的短视频。

您可以设置一个阈值，在这些条件下触发单独的样式。当您希望您的 UI 以不同的大小执行不同的操作时，它会非常有用。

@media only screen 
and (*Your threshold criteria goes here* EXAMPLE:  max-width : 1000px) {   
  //css goes here with whatever css you want to fire at this threshold
}