Question

我知道在这个问题上有几个问题，但是没有一个问题能完全回答我的问题...我有13个SVG相互堆叠（我使用JS脚本使一个出现而另一个消失了，因此创建一种“动画”效果，使某物从一个位置移动到另一个位置），我将它们定位为绝对位置以使其堆积。问题是：我在17英寸的屏幕上工作，当我用screenfly观看时，页面在较大的屏幕（24英寸）上看起来是什么样子，我的元素位置再也不好了。

我已经尝试用我知道的所有单位（px，％，vw / vh，em，rem）来定位它，但是这些都不适合我的情况...

以下是示意图HTML代码：

<svg id="step1">Lots of stuff</svg>
<svg id="step2">Same here</svg>
.
.
.
<svg id="step13">Some more stuff</svg>

这是我使用的CSS规则：

#step1, #step2, #step3, #step4, #step5, #step6, #step7, #step8, #step9, #step10, #step11, #step12, #step13 {
  position: absolute;
  top: 1vh;
  left: 8.5vw;
  margin: 0 auto;
  visibility: hidden; /*They are hidden by default and I use JS to make them visible alternatively.*/
  height: 150px;
}

这里是动画的webpage，我正在谈论的是手机的“俄罗斯方块”动画，因此也许您必须调整浏览器的大小才能很好地观看它……

如果有人对如何使其具有响应性的定位有任何想法，我将非常感激。

本杰明

Answer 1

您是否以柱状方向看过flexbox？无论屏幕高度如何，项目都将保持垂直居中。另外，由于不再需要id，我也删除了它们。

const steps = document.querySelectorAll('.step');
let delay = .25;
steps.forEach(step => {
  step.style.animationDelay = `${delay}s`;
  delay += .25;
});

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
}

.step {
  visibility: hidden;
  opacity: 0;
  border: 1px solid;
  animation-name: makeVisible;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  padding: 1em;
}

@keyframes makeVisible {
  to {
    opacity: 1;
    visibility: visible;
    border-color: transparent;
  }
}

<div class="step">One</div>
<div class="step">Two</div>
<div class="step">Three</div>
<div class="step">Four</div>
<div class="step">Five</div>

jsFiddle

Answer 2

您可以使用媒体查询解决响应性问题。试试这个，希望对您有所帮助。谢谢

@media only screen and (max-width: 768px) {
  .step {
    position: static;
    display: block;
  }
}

.step {
  position: absolute;
  top: 1vh;
  left: 8.5vw;
  margin: 0 auto;
  visibility: hidden; /*They are hidden by default and I use JS to make them visible alternatively.*/
  height: 150px;
}

@media only screen and (max-width: 768px) {
  .step {
	position: static;
	display: block;
  }
}

<svg class="step" id="step1">Lots of stuff</svg>
<svg class="step" id="step2">Same here</svg>
.
.
.
<svg class="step" id="step13">Some more stuff</svg>

具有绝对定位的元素无法响应

2 个答案: