Блог

Я знаю, что было несколько вопросов на эту тему, но ни один из них не дает полного ответа на мою проблему… У меня есть 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;
}
  

Вот веб-страница анимации, о которой я говорю, это анимация «Тетрис» для мобильных телефонов, поэтому, возможно, вам придется изменить размер вашего браузера, чтобы хорошо ее видеть…

Если у кого-нибудь есть идея о том, как сделать его адаптивным, я был бы очень благодарен.

Бенджамин

Вы смотрели на flexbox со столбчатым направлением? Элементы будут оставаться по центру по вертикали независимо от высоты экрана. Кроме того, я удалил id s, поскольку они больше не нужны.

 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

Вы можете использовать медиа-запрос для решения проблемы с адаптивностью. Попробуйте это, я надеюсь, это вам поможет. Спасибо

 @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>