Вертикальный переход на мобильном телефоне против горизонтального на рабочем столе - PullRequest
Новая
       22

Вертикальный переход на мобильном телефоне против горизонтального на рабочем столе

0 голосов
/ 06 декабря 2018

У меня есть пользовательский интерфейс, в котором я хотел бы перемещать / перемещать элемент вертикально на мобильном устройстве (узкая ширина), но горизонтально на рабочем столе (широкая ширина).Есть мысли о подходящей или наилучшей практике для этого?

Я думал о том, чтобы просто использовать медиазапросы CSS для обработки вертикальных и горизонтальных переходов.Может ли jQuery или другая стандартная библиотека сделать это проще?Ваши мысли?

Вот пример мультимедийного запроса CSS, показывающий простой переход при наведении.

JSFiddle 

<div class="wrapper">
  <div class="content">
    content here
  </div>
</div>

.wrapper {
  position: relative;
  overflow: hidden;
  width: 150px;
  height: 150px;
  background-color: blue;
}

.content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: red;
}

@media only screen and (max-width: 400px) {
  .content {
    transition: top 1s ease-out;
  }
}

@media only screen and (min-width: 401px) {
  .content {
    transition: left 1s ease-out;
  }
}

@media only screen and (max-width: 400px) {
  .content:hover {
    top: 150px;
  }
}

@media only screen and (min-width: 401px) {
  .content:hover {
    left: 150px;
  }
}
...