Html 如何使div及其内部内容响应

我正在做一个项目，我有一个div，里面有4个div。 内部div具有固定位置 我想让div反应灵敏，同时我也希望所有4个div都能保持原来的位置 这是我的密码

我已使用页边距顶部、页边距左侧放置内部div位置

.one{
    margin-top: 16em;
    margin-left: 2em;
    position: absolute;
}
.spinner.two {
    margin-top: 20em;
    margin-left: 1em;
    position: absolute;
}
.spinner.three {
    margin-left: 4em;
    margin-top: 23em;
    position: absolute;
}
.spinner.four {
     margin-left: 14em;
    margin-top: 19em;
    position: absolute;
}

---

但我没有做出回应。。。。请帮助

我已经创建了一个JSFIDLE，它根据设备的宽度更具响应性。

我改变的主要事情是：

移除了不必要的绝对位置

将活动区域的宽度设置为其容器的100%——可用的最大宽度，这将响应浏览器宽度的更改

根据%width，而不是绝对像素或ems，将事物相对定位在该区域内

---

它可能不适合您想要的内容，但肯定更具响应性。

我对响应性不太了解，但作为一般规则，您必须在与屏幕大小相关的CSS规则中指定。您必须设置媒体规则及其断点…断点限制（以像素为单位）根据我的经验，在像素尺寸必须改变以适应各种设备的情况下，应该允许尽可能多的div以内容驱动的方式流动。宽度越窄，高度自然增加。绝对定位不适合这种情况。我认为一个好的响应性设计并不一定需要大量的媒体查询。。

.one { margin-left: 7%; }
.two { margin-left: 4%; }
.three { margin-left: 17%; }
.four { margin-left: 40%; }