当我将其调整到最小的宽度和/或使我的网页响应迅速的宽度时，请提供代码的帮助，以显示我的完整网页。

Question

我目前正在我的个人网站上工作，但是我很难尝试使我的代码正确工作。

我要发布图片，以显示我在查看的内容我的网站上的宽度最大和我的网站最小的宽度，我还将添加链接到我的网站和链接到我的github代码

我正在寻找可以指向正确方向的信息/代码，或者帮助我让我的网站响应

在此处的大小＆gt;”和“＆lt; div＆gt;”我想要响应迅速（我不确定这是否应该在这里看的地方，但我确实知道这一切都应该放入 @media仅屏幕和（max宽：1000px）{} ）

body{
    font-family: 'Press Start 2P', cursive;
            margin: 0;
}

.main-area{
    display: flex;
    height: 100%;
    justify-content: space-between;
    align-items: center;
}

Answer 1

您要朝正确的方向前进。只需增加一些断点即可。

/* (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}

/* (Large Phones, 768px and down) */
@media only screen and (max-width: 768px) {...}

/* (Tablets, 992px and down) */
@media only screen and (max-width: 992px) {...}

/*  ( laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

如果不可能，所有这些都至少为移动设备添加一个（最大宽度：768px）和一张平板电脑。

最小宽度表示您首先设计移动设备，然后向上进行较大的屏幕，max Width表示您先设计桌面，然后打破较小的屏幕。

然后在这些断点内添加了元素的规则。

就像您的Main-Araea一样，您可以这样做：

@media only screen and (max-width: 768px) {
    .main{
        height: "auto"
    }
    .main-area{
        display: block;
    }
}

它将使主体区域对移动设备看起来更好。像这种更改的属性一样，所有其他必要的元素并进行调整以使它们看起来更好，例如使图标更大并调整填充等。