热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

这些天,正在赶一个Ionic+phoneGap+Angular1.0的项目整改,具体涉及到的一个时间轴的开发。首先贴出UI设计图,是图中的蓝色部分的开发:备注:由于这部分

这些天,正在赶一个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:

{{product.buyDate | date:'yyyy-MM-dd'}}
购买
{{product.interestDate | date:'yyyy-MM-dd'}}
起息
次日起息
{{product.outLockDate | date:'yyyy-MM-dd'}}
继续持有或债权转让
{{product.period}}天锁定期

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!有没有很棒棒哦!~~~


推荐阅读
  • 深入探讨前端代码优化策略
    本文深入讨论了前端开发中代码优化的关键技术,包括JavaScript、HTML和CSS的优化方法,旨在提升网页加载速度和用户体验。 ... [详细]
  • egg实现登录鉴权(七):权限管理
    权限管理包含三部分:访问页面的权限,操作功能的权限和获取数据权限。页面权限:登录用户所属角色的可访问页面的权限功能权限:登录用户所属角色的可访问页面的操作权限数据权限:登录用户所属 ... [详细]
  • 本文介绍了用户界面(User Interface, UI)的基本概念,以及在iOS应用程序中UIView及其子类的重要性和使用方式。文章详细探讨了UIView如何作为用户交互的核心组件,以及它与其他UI控件和业务逻辑的关系。 ... [详细]
  • 本文由chszs撰写,详细介绍了Apache Mina框架的核心开发流程及自定义协议处理方法。文章涵盖从创建IoService实例到协议编解码的具体步骤,适合希望深入了解Mina框架应用的开发者。 ... [详细]
  • LeetCode 102 - 二叉树层次遍历详解
    本文详细解析了LeetCode第102题——二叉树的层次遍历问题,提供了C++语言的实现代码,并对算法的核心思想和具体步骤进行了深入讲解。 ... [详细]
  • 笔记说明重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系& ... [详细]
  • Vue CLI 基础入门指南
    本文详细介绍了 Vue CLI 的基础使用方法,包括环境搭建、项目创建、常见配置及路由管理等内容,适合初学者快速掌握 Vue 开发环境。 ... [详细]
  • 本文探讨了如何在PHP与MySQL环境中实现高效的分页查询,包括基本的分页实现、性能优化技巧以及高级的分页策略。 ... [详细]
  • 本文探讨了程序员这一职业的本质,认为他们是专注于问题解决的专业人士。文章深入分析了他们的日常工作状态、个人品质以及面对挑战时的态度,强调了编程不仅是一项技术活动,更是个人成长和精神修炼的过程。 ... [详细]
  • 问题描述现在,不管开发一个多大的系统(至少我现在的部门是这样的),都会带一个日志功能;在实际开发过程中 ... [详细]
  • 最近网上搜了一些资料,以前版本的有个安装包,但是最新的版本没有了,他是通过命令行安装并且创建App的,我主要是看的他的文档来 ... [详细]
  • Awk是一款功能强大的文本分析与处理工具,尤其在数据解析和报告生成方面表现突出。它通过读取由换行符分隔的记录,并按照指定的字段分隔符来划分和处理这些记录,从而实现复杂的数据操作。 ... [详细]
  • 利用无代码平台实现高效业务应用开发
    随着市场环境的变化加速,全球企业都在探索更为敏捷的应用开发模式,以便快速响应新兴的商业机遇。然而,传统的软件开发方式不仅成本高昂,而且耗时较长,这往往导致IT与业务部门之间的合作障碍,进而影响项目的成功。本文将探讨如何通过无代码开发平台解决这些问题。 ... [详细]
  • 我的读书清单(持续更新)201705311.《一千零一夜》2006(四五年级)2.《中华上下五千年》2008(初一)3.《鲁滨孙漂流记》2008(初二)4.《钢铁是怎样炼成的》20 ... [详细]
  • 新浪微博热搜暂停更新;即刻APP回归;Android 11 Beta版发布 | 科技新闻速递
    为您带来最新的科技资讯,涵盖社交媒体动态、软件更新及行业重大事件。CSDN携手您共同关注科技前沿。 ... [详细]
author-avatar
萝莉控的小潴_515
这个家伙很懒,什么也没留下!
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有