如何使显示器适合显示？

Question

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

我该如何修复它？我想让它像这样的https://i.stack.imgur.com/m2Jfh.jpg

第一张图片是我使用正常模式/手机模式时的网站

第二张图片是我在手机中使用桌面模式时的网站

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

要使其看起来更像第一张图像，您需要在使用以下代码的</head>之前指定一个视口(如果您尚未指定)：

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

如果你重新加载，你可能会看到它看起来好多了。

接下来，您还应该在CSS中指定最大宽度：

max-width: 90%;

您还应该在边上添加边距：

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

Answer 2

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