如何在elements桌面版和移动版之间建立连接线？

Question

需要帮助制定策略以将其实现为桌面版本：

然后最大的问题是将桌面切换到移动版本并运行，如下所示：

欢迎任何意见文章想法:)

Answer 1

该设计可以通过一些嵌套的 flexbox 技巧来实现。

下面是一个快速、粗略和肮脏的例子，只是为了演示这个机制。请随时根据您的需要调整代码。

注释：

实际数字后面的一行是一行（div class=unit__timeline）只是为了演示。为了使它更好，您需要在实时服务器上使用两个 'div-lines'。您可以通过相同的技术对齐它们...您只需通过相同的机制将它们计算到您的部分所需的 sizes/height/width（通过 top/right/bottom/left 的计算值进行绝对定位和大小调整）。
与断点相同：只有两个（移动设备和小型桌面设备）。请根据您的需要计算字体大小、所需网格等的大小。

html {
  font-family: sans-serif;
}

.unit__wrapper {
  position: relative;
  display: flex;
  flex-direction: row;
}

.unit {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.unit__number {
  padding-bottom: 20px;
}
.unit__number span {
  display: block;
  width: 50px;
  height: 50px;
  font-size: 20px;
  background: steelblue;
  border: 15px solid white;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.unit__content {
  flex-grow: 1;
  padding: 0 15px;
  text-align: center;
}

.unit__timeline {
  position: absolute;
  top: 32.5px;
  left: calc( 100% / 6 );
  right: calc( 100% / 6 );
  height: 10px;
  background: green;
  z-index: -1;
}

@media (min-width: 768px) {
  .unit__wrapper {
    flex-direction: column;
  }

  .unit {
    flex-direction: row;
  }

  .unit__number {
    padding: 20px 0;
  }

  .unit__content {
    text-align: left;
    padding: 0;
  }

  .unit__timeline {
    left: 32.5px;
    top: 60px;
    bottom: 60px;
    right: auto;
    height: auto;
    width: 10px;
  }
}

<div class="unit__wrapper">

    <div class="unit__timeline"></div>

    <div class="unit">
        <div class="unit__number"><span>1</span></div>
        <div class="unit__content">
            Li Europan lingues es membres del sam familie.
            Lor separat existentie es un myth. Por scientie, 
            musica, sport etc, litot Europa usa li sam vocabular.
        </div>
    </div>
    <div class="unit">
        <div class="unit__number"><span>2</span></div>
        <div class="unit__content">
            Li Europan lingues es membres del sam familie.
            Lor separat existentie es un myth. Por scientie, 
            musica, sport etc, litot Europa usa li sam vocabular.
        </div>
    </div>
    <div class="unit">
        <div class="unit__number"><span>3</span></div>
        <div class="unit__content">
            Li Europan lingues es membres del sam familie.
            Lor separat existentie es un myth. Por scientie, 
            musica, sport etc, litot Europa usa li sam vocabular.
        </div>
    </div>

</div>

如何在elements桌面版和移动版之间建立连接线？

How to make conection line between elements desktop and mobile virsion?

html

css

sass

less

css-transitions