如何完美的解决时间轴开发中的"绝对定位"导致的Android兼容性问题(断线,断点问题)

这些天,正在赶一个Ionic+phoneGap+Angular1.0的项目整改,具体涉及到的一个时间轴的开发。

首先贴出UI设计图,是图中的蓝色部分的开发:



备注:由于这部分开发其实跟普通的HTML和CSS开发并无两样,所以我的标题并没有具体写Ionic,应该说这是一种开发思路,供所有开发时间轴会出现断线,断点问题的程序员们参考。

一、第一种开发布局方法:

兼容性测试:

Android的不同机型(vivo,oppo,乐视,联想等出现不同程度的断线断点,且断线方向不一)

iOS的不同机型(iPhone 5s小屏手机出现断线断点,其余iOS机型完美适配)

分五部分写。五个div。

1. 左侧的圈,上右虚折线,购买,日期,这四个为一个div。

2. 左侧深色橘色直线,次日起息,这两个是一个div。

3. 中间的圈,中间的上右虚折线,起息,日期,这四个是一个div。

4. 右侧浅色橘色直线,50天锁定期,这两个是一个div。

5. 右侧的圈,上左虚折线,继续持有或债权转让,日期,这四个是一个div。

每个div内部的元素上下居中对齐都是使用绝对定位,没有兼容性问题。而div之间的衔接上,用的是left具体px直,长度用百分比等等,就会出现兼容性问题。



二、第二种开发布局方法:

兼容性测试:Android的所有机型完美适配;iOS的所有机型完美适配。☺


布局思路:

一根浅色橘色的直线从最左到最右,90%的长度比。

    (1)一根深色橘色的直线从最左到中间,用120px。在这跟深色橘色直线上加两个左右的div,一个左圈、虚线、文字;一个右圈、虚线、文字;且圈,用3px的边框,和白色的背景即可。次日起息的文字也可以对齐。

    (2)一根透明色的直线从最左到最右,100%,一个右圈、虚线、文字。50天锁定期,使用换算66%写30天锁定期。


代码精髓如下:

HTML:

<div class="new_timeLine_box">
       <div class="new_middle_box">
             <div class="new_left_box">
                  <div class="new_left_circle">
                        <div class="new_left_buy_text">{{product.buyDate | date:'yyyy-MM-dd'}}<br/>
                          <span style="color: #999; font-size: 0.8rem;">购买</span>
                            </div>
                            <div class="new_left_top_dotted"></div>
                        </div>
                        <div class="new_right_circle">
                            <div class="new_left_buy_text">{{product.interestDate | date:'yyyy-MM-dd'}}<br/>
                                <span style="color: #999; font-size: 0.8rem;">起息</span>
                            </div>
                            <div class="new_left_top_dotted"></div>
                        </div>
                        <div class="new_left_box_bottomText">次日起息</div>
                    </div>
                    <div class="new_right_box">
                        <div class="new_right_box_circle">
                            <div class="new_right_buy_text">{{product.outLockDate | date:'yyyy-MM-dd'}}<br/>
                                <span style="color: #999; font-size: 0.8rem;">继续持有或债权转让</span>
                            </div>
                 <div class="new_right_top_dotted"></div>
                 </div>
                <div class="new_right_box_bottomText">{{product.period}}天锁定期</div>
             </div>
       </div>
</div>

CSS:

.new_middle_box{
    width:90%;
    height:4px;
    background-color:#ffba99;
    margin:0 auto;
}
.new_left_box{
    float: left;
    width: 120px;
    height: 4px;
    background-color: #fd6d28;
    position: relative;
}
.new_left_circle{
    width: 12px;
    height: 12px;
    border: 3px solid #fd6d28;
    background-color: #fff;
    border-radius: 6px;
    position: absolute;
    left:0;
    z-index: 1;
    top: 50%;
    transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}
.new_right_circle{
    width: 12px;
    height: 12px;
    border: 3px solid #fd6d28;
    background-color: #fff;
    border-radius: 6px;
    position: absolute;
    right:0;
    z-index: 1;
    top: 50%;
    transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}
.new_left_top_dotted{
    width: 30px;
    height: 10px;
    border: 1px dotted #ffba99;
    margin-top: -14px;
    margin-left: 3px;
    border-right: none;
    border-bottom: none;
}
.new_left_buy_text{
    width: 100px;
    font-size: 0.9rem;
    position: absolute;
    top: -55px;
    color: #333;
}
.new_timeLine_box{
    padding:30px 0;
}
.new_right_buy_text{
    width: 140px;
    font-size: 0.9rem;
    position: absolute;
    top: -55px;
    right: 0;
    text-align: right;
    color: #333;
    white-space: nowrap;
}
.new_right_top_dotted{
    width: 30px;
    height: 10px;
    border: 1px dotted #ffba99;
    border-left: none;
    border-bottom: none;
    position: absolute;
    top: -14px;
    right: 3px;
}
.new_right_box{
    float: right;
    width: 100%;
    height: 4px;
    background-color: transparent;
    position: relative;
    top:-4px;
}
.new_right_box_circle{
    width: 12px;
    height: 12px;
    border: 3px solid #fd6d28;
    background-color: #fff;
    border-radius: 6px;
    position: absolute;
    right:0;
    z-index: 2;
    top: 50%;
    transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}
.new_left_box_bottomText{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    color: #fd6d28;
    font-size: 0.8rem;
    top: 12px;
}
.new_right_box_bottomText{
    position: absolute;
    left: 66%;
    transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    color: #fd6d28;
    font-size: 0.8rem;
    top: 12px;
}


真的是完美哦!prefect哦!主要是思路很perfect!有没有很棒棒哦!~~~

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值