html - 在可变容器尺寸上保留 CSS 形状和绝对定位

Question

我正在尝试实现一个 CSS 驱动的布局，它可以将所有类型的 CSS 形状放置在可变大小容器上的需要位置。这些形状本身代表房间中的 table ，只是为了将这种困惑置于上下文中!

我的最大宽度为 1500 像素，最大高度为 1000 像素，各种圆圈和正方形使用绝对定位:这很好，但是当在具有不同尺寸视口(viewport)的各种平板电脑中加载页面时，形状会因为我的原因而倾斜使用宽度/高度作为百分比值。

我需要所有形状都按照当前容器大小的比例保持它们的形状和位置。

我已将我的代码放在 jsfiddle 上任何人都可以查看并更好地了解我要实现的目标。

非常感谢任何帮助。

HTML:

<div class="big-box">
    <div class="little-box little-box-1">Box 1</div>
    <div class="little-box little-box-2">Box 2</div>
    <div class="little-box little-box-3">Box 3</div>
    <div class="little-box little-box-4">Box 4</div>
    <div class="little-box little-box-5">Box 5</div>
    <div class="little-box little-box-6">Box 6</div>
</div>

CSS:

body {
    padding:0;
    margin:0;
}
.big-box {
    margin:0 auto;
    width:100vw;
    height:100vh;
    max-height:1000px;
    max-width:1500px;
    position:relative;
    background-color:#f2f2f2;
}
.little-box {
    width:8%;
    height:8%;
    background-color:#4260D3;
    text-align:center;
    vertical-align:middle;
}
.little-box-1 {
    position:absolute;
    top:5%;
    left:5%;
    border-radius:50%;
}
.little-box-2 {
    position:absolute;
    top:15%;
    left:15%;
}
.little-box-3 {
    position:absolute;
    top:25%;
    left:25%;
}
.little-box-4 {
    position:absolute;
    top:50%;
    left:50%;
}
.little-box-5 {
    position:absolute;
    top:90%;
    left:15%;
}
.little-box-6 {
    position:relative;
    top:25%;
    left:90%;
}
@viewport {
  orientation: landscape;
}

Answer 1

因为您使用百分比定义了大小，所以形状将根据屏幕大小调整大小。

当容器大小发生变化时，您可以使用 javascript 来计算形状大小。

您也可以尝试使用 bootstrap 中的网格.另请参阅 grid system详情

更新

您可以使用 javascript 并根据当前屏幕尺寸按比例计算方框尺寸。 Detecting screen size .