一种根据视口宽度恒定适配WEB的计算方法与流程

本发明属于web响应式布局方法，尤其涉及一种根据视口宽度恒定适配web的计算方法。

背景技术：

1、目前，在前端开发中屏幕适配是一个始终不可不考虑的问题，这个问题如果要是追溯根源的话，那就是从开始的pc端不同尺寸和不同分辨率的显示器导致浏览器展示的分辨率不同，到后来不同屏幕尺寸的智能移动设备的出现，再到现在流行使用的数字大屏界面开发，屏幕适配一直伴随着前端页面开发；

2、在做移动设备(包括手机、pad等)页面开发和数字大屏页面开发，行业内常规的解决办法就是通过页面布局的尺寸单位，基于html根节点设定的标准尺寸，按照开发前预设好的转换系数进行屏幕适配。此方案虽然解决了使用固定尺寸单位缩放后带来的页面布局极度不协调问题，但是这种缩放转换的局限就是基于根节点的标准尺寸按照设定缩放系数进行缩放转换的，因此它的缩放转换范围是有限的。如果存在尺寸跨度范围太大的情况还是会以极其不协调(布局显示的太小)的布局方式展示到页面中。所以此技术在处理跨度比较大的不同尺寸屏幕时，终极解决办法就是通过媒体查询条件(即查询计算当前设备的屏幕大小)，在多套预设不同的可以适配特定范围内的多种不同尺寸屏幕样式中，根据不同条件进行屏幕展示样式适配；这样从开发者的角度会造成代码的臃肿，不便于代码的阅读和维护；从用户的角度来看，由于代码计算任务多，会消耗一定的计算资源和时间，从而出现用户界面卡顿和适配延迟，影响用户体验。以上检索专利发明也是通过获取屏幕空间状态(横屏或者竖屏)后，再通过一系列系数相互计算进行最终的屏幕适配；

3、现有技术虽然有一些屏幕适应的控制方法，但是针对不同大小屏幕和屏幕状态发生变化时都需要进行大量的计算才能对屏幕适配做出恰当的调整最终展示在设备屏幕，这样一来在相同比例但不同大小设备屏幕上展示相同的一套用户界面适配计算时空消耗较大，如遇设备计算能力和网络带宽影响容易出现加载之初的页面不协调，用户感官上有一定的影响；

4、综上所述，现有技术存在前端开发中，存在不同尺寸、分辨率屏幕适配过程中，需要大量适配转换计算的问题。

技术实现思路

1、本发明提供一种根据视口宽度恒定适配web的计算方法，以解决上述背景技术中提出现有技术存在前端开发中，存在不同尺寸、分辨率屏幕适配过程中，需要大量适配转换计算的问题。

2、本发明所解决的技术问题采用以下技术方案来实现：一种根据视口宽度恒定适配web的计算方法，包括：

3、确定目的基准参数：基于源设计视口基准像素单位，通过视口宽度恒定的源目的视口转换函数，确定目的展示视口基准像素单位；

4、确定源元素占比参数：基于源设计元素像素单位和源设计视口像素单位，通过源设计元素占比计算函数，确定源设计元素与源设计视口的源设计元素占比；

5、确定目的展示元素像素单位：基于源设计元素占比和目的展示视口基准像素单位，通过目的展示元素占比适配函数，确定目的展示元素像素单位；

6、基于目的展示元素像素单位，在目的展示视口适配并输出目的展示元素。

7、进一步，所述确定目的基准参数还包括：

8、基于源设计视口基准宽度像素单位和源设计视口基准高度像素单位，通过根据视口宽度恒定原则优化后的源目的视口转换函数，根据视口宽度恒定原则，确定目的展示视口基准宽度像素单位和目的展示视口基准高度像素单位；

9、进一步，所述源目的视口转换函数为：

10、

11、所述wh0’为源设计视口基准像素单位；

12、所述wh0为目的展示视口基准像素单位；

13、所述a为视口调整系数；

14、所述w0’为源设计视口基准宽度像素单位；

15、所述h0’为源设计视口基准高度像素单位；

16、所述w0为目的展示视口基准宽度像素单位；

17、所述h0为目的展示视口基准高度像素单位；

18、根据视口宽度恒定原则优化后的源目的视口转换函数：

19、

20、进一步，所述目的展示视口基准像素单位优选为：

21、若：

22、a＝100％；

23、且；

24、

25、则：

26、wh0＝100％×100％＝100％；

27、且；

28、

29、进一步，所述确定源元素占比参数还包括：

30、确定源图形元素占比参数：

31、基于源设计图形元素宽度像素单位、源设计图形元素高度像素单位和源设计视口宽度像素单位、源设计视口高度像素单位，通过源设计图形元素占比计算函数，确定源设计图形元素与源设计视口的源设计图形元素宽度占比和源设计图形元素高度占比；

32、确定源字符元素占比参数：

33、基于源设计字符元素宽度像素单位、源设计字符元素高度像素单位和源设计视口宽度像素单位、源设计视口高度像素单位，通过源设计字符元素占比计算函数，确定源设计字符元素与源设计视口的源设计字符元素宽度占比和源设计字符元素高度占比。

34、进一步，所述源设计图形元素占比计算函数为：

35、

36、所述wt％为源设计图形元素宽度占比；

37、所述ht％为源设计图形元素高度占比；

38、所述w0t’源设计图形元素宽度像素单位；

39、所述h0t’源设计图形元素高度像素单位。

40、进一步，所述源设计字符元素占比计算函数为：

41、所述源设计字符元素占比计算函数为：

42、

43、所述wf％为源设计字符元素宽度占比；

44、所述hf％为源设计字符元素高度占比；

45、所述w0f’源设计字符元素宽度像素单位；

46、所述h0f’源设计字符元素高度像素单位。

47、进一步，所述确定目的展示元素像素单位还包括：

48、确定目的展示图形元素像素单位：

49、基于源设计图形元素宽度占比和源设计图形元素高度占比和目的展示视口基准宽度像素单位、目的展示视口基准高度像素单位，通过目的展示图形元素占比适配函数，确定目的展示图形元素宽度像素单位和目的展示图形元素高度像素单位；

50、确定目的展示字符元素像素单位：

51、基于源设计字符元素宽度占比和源设计字符元素高度占比和目的展示视口宽度基准像素单位、目的展示视口高度基准像素单位，通过目的展示字符元素占比适配函数，确定目的展示字符元素宽度像素单位和目的展示图形元素高度像素单位。

52、进一步，所述目的展示图形元素占比适配函数为：

53、

54、所述wt1为目的展示图形元素宽度像素单位；

55、所述ht1为目的展示图形元素高度像素单位。

56、进一步，所述目的展示字符元素占比适配函数为：

57、

58、所述wf1为目的展示字符元素宽度像素单位；

59、所述hf1为目的展示字符元素高度像素单位。

60、本发明的有益效果为：

61、本发明采用确定目的基准参数：基于源设计视口基准像素单位，通过视口宽度恒定的源目的视口转换函数，确定目的展示视口基准像素单位；确定源元素占比参数：基于源设计元素像素单位和源设计视口像素单位，通过源设计元素占比计算函数，确定源设计元素与源设计视口的源设计元素占比；确定目的展示元素像素单位：基于源设计元素占比和目的展示视口基准像素单位，通过目的展示元素占比适配函数，确定目的展示元素像素单位；基于目的展示元素像素单位，在目的展示视口适配并输出目的展示元素，由于本方案首先，获取设计稿宽度像素单位，然后，获取页面元素宽度和高度的像素单位，若页面需要适配，则根据适配尺寸进行计算，若不需要适配，则直接书写像素单位，通过上述流程，计算只基于设备屏幕宽和高的像素比，不需要参照适配过程中其他基础系数的适配方法，在适配过程中计算节流能为用户界面展示节省出大量的计算等待时间，计算过程也不会受到网络信号影响，能够快速高效的完成屏幕适配展现，因此，解决了在不同尺寸、分辨率屏幕适配过程中，需要大量适配转换计算的问题，本发明的原理：在一个完整的设计稿中，单位像素面积范围内，所有用户图形界面元素展示的面积是恒定的，在前端开发适配相同比例不同大小尺寸的展示终端设备时，需要展示的用户图形界面计算基准，是依照原始设计稿中的用户图形界面在原始整体设计稿中的所占面积比例进行适配展示，本发明通过适配系数设定和节流大量的适配转换计算，只需要一套标准，即可在相同比例不同尺寸屏幕下适配，无需进行复杂转换计算，为开发工作提供了极大的便利性，同时也使用户体验更加流畅。