Question

我使用split.js创建了此拆分屏幕视图。两个div彼此相邻显示。您可以拖动中间部分，使中间部分变大。现在，如果屏幕小于768 px，最好让两个div自动降到彼此下方，但是保留了分屏功能。

除了在缩放浏览器时自动更改视图之外，最好还是为用户提供自己选择水平/垂直选项的选项。这样，他们就可以推翻标准行为。

我已经尝试使用bootstrap 4，cfr。 https://www.youtube.com/watch?v=bh3UAetYkUI&feature=youtu.be，但它们似乎不能很好地协同工作。

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]
});

如何使我的分屏响应方式？

0 个答案: