通过2个CSS3属性极快速实现页面自适应的方法与流程

文档序号:18319699发布日期:2019-08-03 10:20阅读:154来源:国知局

本发明涉及互联网技术领域,特别是涉及一种通过2个css3属性极快速实现页面自适应的方法。



背景技术:

在现有技术中,媒体查询+定宽度是做自适应网站最常用的方法,但是定了宽度修改起来很繁琐,不利于维护,父盒子和子盒子的宽都要修改。

因此,现有技术需要改进。



技术实现要素:

本发明实施例所要解决的一个技术问题是:提供一种通过2个css3属性极快速实现页面自适应的方法,以解决现有技术中存在的问题。

根据本发明实施例的一个方面,提供的一种通过2个css3属性极快速实现页面自适应的方法,包括:

s1,将页面整个内容区域,用一个类名包裹起来;

s2,利用css3属性2d转换,放大或者缩小内容区的类名;

s3,利用媒体查询功能,将放大、缩小内容区的功能具体到相应的场景中。

基于上述通过2个css3属性极快速实现页面自适应的方法的另一个实施例中,所述利用css3属性2d转换,放大或者缩小内容区的类名包括:

相应用户对目标元素元件的选中操作,将所述目标元素元件进行整合,得到目标元件集合;

响应用户调用css3属性的2d转换指令,对所述目标元素元件结合进行编辑操作,按照用户选择的编辑方式对所述目标元素元件进行编辑处理,得到处理后的关键态,多个关键态按照生成顺序组织成关键态队列。

基于上述通过2个css3属性极快速实现页面自适应的方法的另一个实施例中,所述利用css3属性2d转换,放大或者缩小内容区的类名还包括:

获取页面内容区数据包,所述页面内容区数据包包括除背景图之外的版心内容的关键态和图像帧组成的关键态队列,其中,所述关键态为通过css3方法对组成涉及原型的元素元件进行整合变换后得到的关键态;

依序对所述动画数据包中的关键态和图像帧进行播放。

基于上述通过2个css3属性极快速实现页面自适应的方法的另一个实施例中,所述依序对所述动画数据包中的关键态和图像帧进行播放包括:

通过javascript脚本对所述动画数据包中关键态和图像帧进行播放控

基于上述通过2个css3属性极快速实现页面自适应的方法的另一个实施例中,所述依序对所述动画数据包中的关键态和图像帧进行播放还包括:

采用异步加载的方式,从服务器中获取所述动画数据包。

与现有技术相比,本发明具有以下优点:

基于本发明上述实施例提供的通过2个css3属性极快速实现页面自适应的方法,采用的2d转换加媒体查询的方法,能更快的实现页面自适应,由于去掉了累赘代码,加快了页面加载速度,并且可以添加过渡时间,可以让页面自适应的时候内容区切换得更流畅。

下面通过实施例,对本发明的技术方案做进一步的详细描述。

具体实施方式

现在详细描述本发明的各种示例性实施例。应注意到:除非另外具体说明,否则在这些实施例中阐述的部件和步骤的相对布置、数字表达式和数值不限制本发明的范围。

以下对至少一个示例性实施例的描述实际上仅仅是说明性的,决不作为对本发明及其应用或使用的任何限制。

对于相关领域普通技术人员已知的技术和设备可能不作详细讨论,但在适当情况下,所述技术和设备应当被视为说明书的一部分。

一种通过2个css3属性极快速实现页面自适应的方法包括:

s1,将页面整个内容区域,用一个类名包裹起来;

s2,利用css3属性2d转换,放大或者缩小内容区的类名;

s3,利用媒体查询功能,将放大、缩小内容区的功能具体到相应的场景中。

所述利用css3属性2d转换,放大或者缩小内容区的类名包括:

相应用户对目标元素元件的选中操作,将所述目标元素元件进行整合,得到目标元件集合;

响应用户调用css3属性的2d转换指令,对所述目标元素元件结合进行编辑操作,按照用户选择的编辑方式对所述目标元素元件进行编辑处理,得到处理后的关键态,多个关键态按照生成顺序组织成关键态队列。

所述利用css3属性2d转换,放大或者缩小内容区的类名还包括:

获取页面内容区数据包,所述页面内容区数据包包括除背景图之外的版心内容的关键态和图像帧组成的关键态队列,其中,所述关键态为通过css3方法对组成涉及原型的元素元件进行整合变换后得到的关键态;

依序对所述动画数据包中的关键态和图像帧进行播放。

所述依序对所述动画数据包中的关键态和图像帧进行播放包括:

通过javascript脚本对所述动画数据包中关键态和图像帧进行播放控

所述依序对所述动画数据包中的关键态和图像帧进行播放还包括:

采用异步加载的方式,从服务器中获取所述动画数据包。

本说明书中各个实施例均采用递进的方式描述,每个实施例重点说明的都是与其它实施例的不同之处,各个实施例之间相同或相似的部分相互参见即可。

本发明的描述是为了示例和描述起见而给出的,而并不是无遗漏的或者将本发明限于所公开的形式。很多修改和变化对于本领域的普通技术人员而言是显然的。选择和描述实施例是为了更好说明本发明的原理和实际应用,并且使本领域的普通技术人员能够理解本发明从而设计适于特定用途的带有各种修改的各种实施例。



技术特征:

技术总结
本发明公开了一种通过2个CSS3属性极快速实现页面自适应的方法,包括:S1,将页面整个内容区域,用一个类名包裹起来;S2,利用CSS3属性2D转换,放大或者缩小内容区的类名;S3,利用媒体查询功能,将放大、缩小内容区的功能具体到相应的场景中。本发明采用的2D转换加媒体查询的方法,能更快的实现页面自适应,由于去掉了累赘代码,加快了页面加载速度,并且可以添加过渡时间,可以让页面自适应的时候内容区切换得更流畅。

技术研发人员:宋俊叶
受保护的技术使用者:广州碧辉腾乐软件科技有限公司
技术研发日:2019.03.22
技术公布日:2019.08.02
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1