更改浏览器大小时网站混乱

Question

每当网站以任何方式更改其大小时，我都会遇到问题，无论是浏览器的大小，还是检查 Web 浏览器中的代码，页面大小的任何更改都会使其看起来非常糟糕。我上周才开始学习编码，我在 frontendmentor.io 上接受了挑战“社会证明部分”来练习我的 HTML 和 CSS。如果有人可以看看它并告诉我是什么导致它，我将非常感激！另外，在这里发帖很尴尬，因为我是个菜鸟，一周前才开始学习，我的代码显然非常糟糕

网站链接：https://blakebutlin95.github.io/Social-Proof-Section-Challenge/

Github 链接：https://github.com/BlakeButlin95/Social-Proof-Section-Challenge/tree/master/css

也很抱歉css文件中的一个空代码，直到一分钟前我才意识到它存在

Answer 1

问题不在于页面的大小调整。问题是您使用了绝对尺寸。这意味着当我打开页面时，它看起来更糟，因为我的屏幕尺寸不同。您必须创建不同的部分并在其中实现对象。
这就是它在较小的 PC 上的外观。

这是一个如何正确构建它的草图。

尝试仅用于水平尺寸 % 和垂直尺寸 px。 将 <div> 标记用于框。
有时您必须将其设置为 display: inline-block; 以便多个 div 适合一行。
不设置高度也很重要，因为它始终取决于设备文本需要多大的空间。尝试使用 mor 填充。

Answer 2

这是因为您使用的是绝对尺寸，这会给不同的屏幕尺寸带来问题。尝试查找 flex box 并在此处应用它。

Answer 3

您正在使用绝对定位，它绝对定位参考最近的具有相对位置值的父元素，如果没有具有相对位置的父元素，则绝对定位的元素将从浏览器获取其引用窗口。