Question

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

我的最大宽度为1500px，最大高度为1000px，各种圆形和正方形的位置为绝对：这很好但是当在各种具有不同尺寸视口的平板电脑中加载页面时，由于我的形状，形状会变得歪斜使用宽度/高度作为百分比值。

我需要所有形状以保持其形状和与当前容器尺寸的比例定位。

我已将我的代码放在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

在可变容器大小上保留CSS形状和绝对定位

1 个答案: