Как я могу сделать мой разделенный экран отзывчивым? - PullRequest
Новая
       28

Как я могу сделать мой разделенный экран отзывчивым?

0 голосов
/ 21 июня 2019

Я создал этот разделенный экран, используя split.js. Два div показаны рядом друг с другом. Вы можете перетащить середину, чтобы сделать один больше или меньше. Теперь было бы неплохо позволить двум элементам div автоматически падать друг на друга, если размер экрана меньше, чем, скажем, на 768 пикселей, но, естественно, сохраняя функциональность разделенного экрана.

Еще лучше, кроме автоматического изменения вида при масштабировании браузера, было бы неплохо дать пользователю возможность выбрать горизонтальный / вертикальный вид. Таким образом, они могут отменить стандартное поведение.

Я уже пробовал работать с bootstrap 4, cfr. https://www.youtube.com/watch?v=bh3UAetYkUI&feature=youtu.be, но, похоже, они плохо работают вместе.

Мой код: https://jsfiddle.net/rjtpvhn1/1/

HTML: 

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <div class="content">
      <div class="split a">text left</div>
      <div class="split b">text right</div>
    </div>
  </body>
</html>

CSS: 

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      height: 100vh;
      font-size: 20px;
    }

    .content {
      width: 100%;
      height: 100%;
      display: flex;
      justify-items: center;
      align-items: center;
    }

    .split {
      width: 100%;
      height: 100%;
      padding: 30px;
      border: 1px solid;
      overflow: auto;
    }

    .gutter {
      cursor: e-resize;
      height: 100%;
      background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/vsizegrip.png) center center no-repeat #ccc;
    }

JAVASCRIPT: (включая https://unpkg.com/split.js/dist/split.min.js)

Split(['.a', '.b'], {
  gutterSize: 9,
  sizes: [50, 50]
});
...