一种页面自适应适配方法、电子设备及计算机可读介质组成比例

技术编号:40085820 阅读:14 留言:0更新日期:2024-01-23 15:26
本发明专利技术公开了一种页面自适应适配方法、电子设备及计算机可读介质,涉及计算机技术领域,如下步骤:获取屏幕参数和设计参数;计算整体缩放度和页面容器宽度;基于整体缩放度和页面容器宽度设置页面容器的CSS属性,完成页面与屏幕的适配。本发明专利技术可以使页面与屏幕的适配度更高。

【技术实现步骤摘要】

本专利技术涉及计算机,具体涉及一种页面自适应适配方法、电子设备及计算机可读介质


技术介绍

1、现有技术中,显示大屏页面的项目所使用的常见布局方式是:中央区域显示地图、3d元素等主视觉元素,两侧展示图表。通常页面会按照固定的尺寸来提供设计稿,如1920px*1080px,而后在保持页面内容与设计稿宽高比一致的前提下等比缩放进行适配。然而这种适配方式,在设计稿与屏幕宽高比不相等时,会产生页面内容两侧留白的问题。


技术实现思路

1、本专利技术旨在一定程度上解决相关技术中的技术问题之一。为此,本专利技术提供了一种页面自适应适配方法,使页面与屏幕的适配度更高。

2、为了达到上述目的,本专利技术采用如下技术方案:

3、一种页面自适应适配方法,包括如下步骤:

4、获取屏幕参数和设计参数;

5、计算整体缩放度和页面容器宽度;

6、基于整体缩放度和页面容器宽度设置页面容器的css属性,完成页面与屏幕的适配。

7、可选的,所述屏幕参数包括屏幕宽度和屏幕高度本文档来自技高网...

【技术保护点】

1.一种页面自适应适配方法,其特征在于,所述页面自适应适配方法包括如下步骤:

2.根据权利要求1所述的页面自适应适配方法,其特征在于,所述屏幕参数包括屏幕宽度和屏幕高度;所述设计参数包括设计宽度、设计高度和最大宽度。

3.根据权利要求2所述的页面自适应适配方法,其特征在于,计算整体缩放度包括如下步骤:

4.根据权利要求3所述的页面自适应适配方法,其特征在于,计算页面容器宽度包括如下步骤:

5.根据权利要求4所述的页面自适应适配方法,其特征在于,基于整体缩放度和页面容器宽度设置页面容器的CSS属性包括:页面缩放度为整体缩放度,页面宽度为页面容...

【技术特征摘要】

1.一种页面自适应适配方法,其特征在于,所述页面自适应适配方法包括如下步骤:

2.根据权利要求1所述的页面自适应适配方法,其特征在于,所述屏幕参数包括屏幕宽度和屏幕高度;所述设计参数包括设计宽度、设计高度和最大宽度。

3.根据权利要求2所述的页面自适应适配方法,其特征在于,计算整体缩放度包括如下步骤:

4.根据权利要求3所述的页面自适应适配方法,其特征在于,计算页面容器宽度...

【专利技术属性】
技术研发人员:孙浩鹏
申请(专利权)人:江苏缤原力科技有限公司
类型:发明
国别省市:

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1