[发明专利]一种网页自适应布局方法、服务器及计算机可读存储介质

权利要求书

1.一种网页自适应布局方法，其特征在于，所述方法包括：

将rem设置为CSS中元素width,height,margin,padding,left top属性的单位；

当网页打开时，根据终端屏幕大小调整HTML元素的font-size值，使得body中元素的属性值随font-size值同步调整；

计算设计稿宽高比和终端屏幕宽高比，并对比设计稿宽高比和终端屏幕宽高比得到对比结果；

根据所述对比结果优化body中元素的属性值，得到body中元素的优化后属性值；

根据所述body中元素的优化后属性值生成优化页面。

2.如权利要求1所述的网页设计稿自适应布局方法，所述计算设计稿宽高比和终端屏幕宽高比，并对比设计稿宽高比和终端屏幕宽高比得到对比结果的步骤，具体包括如下步骤：

获取所述设计稿的设计稿宽和设计稿高，根据设计稿宽除以设计稿高得到所述设计稿宽高比；

获取所述终端屏幕的屏宽和屏高，根据屏宽除以屏高得到所述终端屏幕宽高比；

对比所述设计稿宽高比和所述终端屏幕宽高比以得到对比结果。

3.如权利要求1所述的网页设计稿自适应布局方法，所述根据所述对比结果优化body元素的属性值，得到body中元素的优化后属性值的步骤，具体包括如下步骤：

当所述屏幕宽高比小于所述设计稿宽高比时，设置设计稿的最小宽度；

当所述屏幕宽高比大于所述设计稿宽高比时，缩放设计稿及网页其他元素。

4.如权利要求3所述的网页设计稿自适应布局方法，所述当所述屏幕宽高比小于所述设计稿宽高比时，设置设计稿的最小宽度的步骤，具体包括如下步骤：

根据所述屏高和所述设计稿高计算出最小宽度；

将所述最小宽度设置于HTML元素上；

设置横向滚动条。

5.如权利要求3所述的网页设计稿自适应布局方法，所述当屏幕宽高比大于所述设计稿宽高比时，缩放设计稿及网页其他元素的步骤，具体包括如下步骤：

以所述屏高乘以所述设计稿宽高比，得到实际显示的设计稿宽度；

将所述实际显示的设计稿宽度通过DOM树赋值于body元素；

计算并设置新的HTML元素font-size值；

将body元素水平居中，页面两侧空白处使用背景色填充。

6.如权利要求1-5所述的网页设计稿自适应布局方法，其特征在于，所述方法还包括：

根据指令切换网页页面的页面模式；

当接收到呈现初始页面的指令时，页面切换为所述初始页面；

当接收到呈现优化页面的指令时，页面切换为所述优化页面。

7.如权利要求1-5所述的网页设计稿自适应布局方法，其特征在于，所述方法还包括：

根据指令切换网页页面的场景模式；

当接收到进入特殊场景的指令时，页面切换为特殊场景模式；

当接收到进入普通场景的指令时，页面切换为普通场景模式。

8.如权利要求1-5所述的网页设计稿自适应布局方法，其特征在于，所述方法还包括：

根据指令缩放页面或者页面内的指定内容；

当接收到针对网页的缩放指令时，对网页所有内容进行缩放；

当接收到针对网页指定内容的缩放指令时，对网页指定内容进行缩放。

9.一种服务器，其特征在于，所述电子装置包括存储器、处理器，所述存储器上存储有可在所述处理器上运行的网页设计稿自适应布局系统，所述网页设计稿自适应布局系统被所述处理器执行时实现如权利要求1-8中任一项所述的网页设计稿自适应布局方法的步骤。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有网页设计稿自适应布局系统，所述网页设计稿自适应布局系统可被至少一个处理器执行，以使所述至少一个处理器执行如权利要求1-8中任一项所述网页设计稿自适应布局方法的步骤。