我如何使显示器适合？

Question

https://i.stack.imgur.com/rDst8.jpg

我该如何解决？我想做成这样 https://i.stack.imgur.com/m2Jfh.jpg

第一张图片是我使用普通模式/phone模式时的网站

第二张图片是我在phone

中使用桌面模式时的网站

My css:
text-align: center;
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  
  font-size: calc(10px + 2vmin);
      color: white;

Answer 1

您可以使用 flex: wrap; 来修复它，它可以通过多种方式完成。你可以在这里探索 flex 和 grid 属性， https://developer.mozilla.org/en-US/docs/Web/CSS

Answer 2

为了让它看起来更像第一张图片，您需要在 </head> 之前使用以下代码指定一个视口（如果您还没有指定的话）：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

如果重新加载，您可能会发现它看起来好多了。

接下来，您还应该在 CSS:

中指定最大宽度

max-width: 90%;

你还应该在两侧添加边距：

margin-left: 5%;
margin-right: 5%;

我如何使显示器适合？

How do i make the display fit?

css

reactjs

display