Question

下面是我的html，目前只有2条腿/航班，但我应该可以设计最多5条腿。

目前，我已经给出了两者之间线条的宽度百分比，其余元素都有固定的宽度。

<div class="roster-steps">

                                <span class="roster-points">DOH</span>
                                <span class="roster-meta-bottom-step-one font-size-065">E17 MAR 10:30</span>
                                <span class="fa  fa-circle-thin fa-lg"></span>

                                <span class="o-arrow"><hr class="hr-custom-three"></span>

                                <span><i class="fa fa-plane roster-points" ></i></span>
                                <span class="roster-meta-step2-top font-size-065">QR 2345 A360</span>
                                <span class="roster-meta-bottom-step-two font-size-065">10:30 hrs</span>
                                <span class="roster-meta-bottom-step-twosub font-size-065"><span class="two-sub1" >OP</span><span class="two-sub2">B</span></span>

                                <span class="arrow-o"><hr class="hr-custom-three" ></span>

                                <span class="fa  fa-circle-thin fa-lg"></span>
                                <span class="roster-points">LHR</span>
                                <span class="roster-meta-bottom-step-three font-size-065"><i class="fa fa-plane"></i> E17 MAR 16:30</span>
                                <span class="roster-meta-bottom-step-threesub font-size-065"><i class="fa fa-plane fa-rotate-90"></i> E17 MAR 17:30</span>
                                <span class="fa  fa-circle-thin fa-lg"></span>

                                <span class="o-arrow"><hr class="hr-custom-three" ></span>

                                <span><i class="fa fa-taxi roster-points" ></i></span>
                                <span class="roster-meta-step4-top font-size-065">TAXI</span>
                                <span class="roster-meta-bottom-step-four font-size-065">1:30 hrs</span>
                                <span class="roster-meta-bottom-step-foursub font-size-065"><span class="four-sub1" >DH</span></span>

                                <span class="arrow-o"><hr class="hr-custom-three" ></span>

                                <span class="fa  fa-circle-thin fa-lg"></span>
                                <span class="roster-points">LGW</span>
                                <span class="roster-meta-bottom-step-one font-size-065">E17 MAR 20:00</span>

                            </div>

高度赞赏任何正确方向的指导。

编辑：

现在不能让它垂直，因为设计团队已签署此协议。

因此使用css网格布局非常简单：

Check it out

注意：要在Chrome中查看它您需要打开实验标记。首先加载chrome：// flags URL并向下滚动到“启用实验性Web平台功能”选项

但是由于主流浏览器仍然不支持css网格布局，是否有更可靠的替代方案？

感谢。

Answer 1

您应该使用媒体查询。像这样：

@media screen and (max-width:450px){
  /**
  your css code for mobile version of website
  **/
}

您可以从此处了解有关响应能力的更多信息：responsive website css

如何使下面的UI完全响应

1 个答案: