一种根据视口宽度恒定适配WEB的计算方法技术

本发明专利技术属于WEB响应式布局方法技术领域，尤其涉及一种根据视口宽度恒定适配WEB的计算方法，其包括确定目的基准参数、确定源元素占比参数、确定目的展示元素像素单位，本发明专利技术解决了现有技术存在前端开发中，存在不同尺寸、分辨率屏幕适配过程中，需要大量适配转换计算的问题，具有通过适配系数设定和节流大量的适配转换计算，只需要一套标准，即可在相同比例不同尺寸屏幕下适配，无需进行复杂转换计算，为开发工作提供了极大的便利性，同时也使用户体验更加流畅的有益技术效果。体验更加流畅的有益技术效果。体验更加流畅的有益技术效果。

【技术实现步骤摘要】
一种根据视口宽度恒定适配WEB的计算方法


[0001]本专利技术属于WEB响应式布局方法
，尤其涉及一种根据视口宽度恒定适配WEB的计算方法。

技术介绍

[0002]目前，在前端开发中屏幕适配是一个始终不可不考虑的问题，这个问题如果要是追溯根源的话，那就是从开始的PC端不同尺寸和不同分辨率的显示器导致浏览器展示的分辨率不同，到后来不同屏幕尺寸的智能移动设备的出现，再到现在流行使用的数字大屏界面开发，屏幕适配一直伴随着前端页面开发；
[0003]在做移动设备(包括手机、pad等)页面开发和数字大屏页面开发，行业内常规的解决办法就是通过页面布局的尺寸单位，基于HTML根节点设定的标准尺寸，按照开发前预设好的转换系数进行屏幕适配。此方案虽然解决了使用固定尺寸单位缩放后带来的页面布局极度不协调问题，但是这种缩放转换的局限就是基于根节点的标准尺寸按照设定缩放系数进行缩放转换的，因此它的缩放转换范围是有限的。如果存在尺寸跨度范围太大的情况还是会以极其不协调(布局显示的太小)的布局方式展示到页面中。所以此技术在处理跨度比较大的不同尺寸屏幕时，终极解决办法就是通过媒体查询条件(即查询计算当前设备的屏幕大小)，在多套预设不同的可以适配特定范围内的多种不同尺寸屏幕样式中，根据不同条件进行屏幕展示样式适配；这样从开发者的角度会造成代码的臃肿，不便于代码的阅读和维护；从用户的角度来看，由于代码计算任务多，会消耗一定的计算资源和时间，从而出现用户界面卡顿和适配延迟，影响用户体验。以上检索专利专利技术也是通过获取屏幕空间状态(横屏或者竖屏)后，再通过一系列系数相互计算进行最终的屏幕适配；
[0004]现有技术虽然有一些屏幕适应的控制方法，但是针对不同大小屏幕和屏幕状态发生变化时都需要进行大量的计算才能对屏幕适配做出恰当的调整最终展示在设备屏幕，这样一来在相同比例但不同大小设备屏幕上展示相同的一套用户界面适配计算时空消耗较大，如遇设备计算能力和网络带宽影响容易出现加载之初的页面不协调，用户感官上有一定的影响；
[0005]综上所述，现有技术存在前端开发中，存在不同尺寸、分辨率屏幕适配过程中，需要大量适配转换计算的问题。

技术实现思路

[0006]本专利技术提供一种根据视口宽度恒定适配WEB的计算方法，以解决上述
技术介绍
中提出现有技术存在前端开发中，存在不同尺寸、分辨率屏幕适配过程中，需要大量适配转换计算的问题。
[0007]本专利技术所解决的技术问题采用以下技术方案来实现：一种根据视口宽度恒定适配WEB的计算方法，包括：
[0008]确定目的基准参数：基于源设计视口基准像素单位，通过视口宽度恒定的源目的
视口转换函数，确定目的展示视口基准像素单位；
[0009]确定源元素占比参数：基于源设计元素像素单位和源设计视口像素单位，通过源设计元素占比计算函数，确定源设计元素与源设计视口的源设计元素占比；
[0010]确定目的展示元素像素单位：基于源设计元素占比和目的展示视口基准像素单位，通过目的展示元素占比适配函数，确定目的展示元素像素单位；
[0011]基于目的展示元素像素单位，在目的展示视口适配并输出目的展示元素。
[0012]进一步，所述确定目的基准参数还包括：
[0013]基于源设计视口基准宽度像素单位和源设计视口基准高度像素单位，通过根据视口宽度恒定原则优化后的源目的视口转换函数，根据视口宽度恒定原则，确定目的展示视口基准宽度像素单位和目的展示视口基准高度像素单位；
[0014]进一步，所述源目的视口转换函数为：
[0015][0016]所述WH0
’
为源设计视口基准像素单位；
[0017]所述WH0为目的展示视口基准像素单位；
[0018]所述A为视口调整系数；
[0019]所述W0
’
为源设计视口基准宽度像素单位；
[0020]所述H0
’
为源设计视口基准高度像素单位；
[0021]所述W0为目的展示视口基准宽度像素单位；
[0022]所述H0为目的展示视口基准高度像素单位；
[0023]根据视口宽度恒定原则优化后的源目的视口转换函数：
[0024][0025]进一步，所述目的展示视口基准像素单位优选为：
[0026]若：
[0027]A＝100％；
[0028]且；
[0029][0030]则：
[0031]WH0＝100％
×
100％＝100％；
[0032]且；
[0033][0034]进一步，所述确定源元素占比参数还包括：
[0035]确定源图形元素占比参数：
[0036]基于源设计图形元素宽度像素单位、源设计图形元素高度像素单位和源设计视口
宽度像素单位、源设计视口高度像素单位，通过源设计图形元素占比计算函数，确定源设计图形元素与源设计视口的源设计图形元素宽度占比和源设计图形元素高度占比；
[0037]确定源字符元素占比参数：
[0038]基于源设计字符元素宽度像素单位、源设计字符元素高度像素单位和源设计视口宽度像素单位、源设计视口高度像素单位，通过源设计字符元素占比计算函数，确定源设计字符元素与源设计视口的源设计字符元素宽度占比和源设计字符元素高度占比。
[0039]进一步，所述源设计图形元素占比计算函数为：
[0040][0041]所述W
T％
为源设计图形元素宽度占比；
[0042]所述H
T％
为源设计图形元素高度占比；
[0043]所述W0
T
’
源设计图形元素宽度像素单位；
[0044]所述H0
T
’
源设计图形元素高度像素单位。
[0045]进一步，所述源设计字符元素占比计算函数为：
[0046]所述源设计字符元素占比计算函数为：
[0047][0048]所述W
F％
为源设计字符元素宽度占比；
[0049]所述H
F％
为源设计字符元素高度占比；
[0050]所述W0
F
’
源设计字符元素宽度像素单位；
[0051]所述H0
F
’
源设计字符元素高度像素单位。
[0052]进一步，所述确定目的展示元素像素单位还包括：
[0053]确定目的展示图形元素像素单位：
[0054]基于源设计图形元素宽度占比和源设计图形元素高度占比和目的展示视口基准宽度像素单位、目的展示视口基准高度像素单位，通过目的展示图形元素占比适配函数，确定目的展示图形元素宽度像素单位和目的展示图形元素高度像素单位；
[0055]确定目的展示字符元素像素单位：
[0056]基于源设计字符元素宽度占比和源设计字符元素高度占比和目的展示视口宽度基准像素单位、目的本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种根据视口宽度恒定适配WEB的计算方法，其特征在于，包括：确定目的基准参数：基于源设计视口基准像素单位，通过视口宽度恒定的源目的视口转换函数，确定目的展示视口基准像素单位；确定源元素占比参数：基于源设计元素像素单位和源设计视口像素单位，通过源设计元素占比计算函数，确定源设计元素与源设计视口的源设计元素占比；确定目的展示元素像素单位：基于源设计元素占比和目的展示视口基准像素单位，通过目的展示元素占比适配函数，确定目的展示元素像素单位；基于目的展示元素像素单位，在目的展示视口适配并输出目的展示元素。2.根据权利要求1所述的适配WEB的计算方法，其特征在于，所述确定目的基准参数还包括：基于源设计视口基准宽度像素单位和源设计视口基准高度像素单位，通过根据视口宽度恒定原则优化后的源目的视口转换函数，根据视口宽度恒定原则，确定目的展示视口基准宽度像素单位和目的展示视口基准高度像素单位。3.根据权利要求2所述的适配WEB的计算方法，其特征在于，所述源目的视口转换函数为：所述WH0
’
为源设计视口基准像素单位；所述WH0为目的展示视口基准像素单位；所述A为视口调整系数；所述W0
’
为源设计视口基准宽度像素单位；所述H0
’
为源设计视口基准高度像素单位；所述W0为目的展示视口基准宽度像素单位；所述H0为目的展示视口基准高度像素单位；根据视口宽度恒定原则优化后的源目的视口转换函数：4.根据权利要求3所述的适配WEB的计算方法，其特征在于，所述目的展示视口基准像素单位优选为：若：A＝100％；且；则：WH0＝100％
×
100％＝100％；且；
5.根据权利要求1所述的适配WEB的计算方法，其特征在于，所述确定源元素占比参数还包括：确定源图形元素占比参数：基于源设计图形元素宽度像素单位、源设计图形元素高度像素单位和源设计视口宽度像素单位、源设计视口高度像素单位，通过源设计图形元素占比计算函数，确定源设计图形元素与源设计视口的源设计图形元素宽度占比和源设计图形元素高度占比；确定源字符元素占比参数：基于源设计字符元素宽度像素单位、源设计字符元素高度像素单位和源设计视口宽度像素单位、源设计视口高度像素单位，通过源设计字符元素占比计算...

【专利技术属性】
技术研发人员：郭志宏，李力伟，林震，王鹏，吴立军，
申请(专利权)人：内蒙古航天信息有限公司，
类型：发明
国别省市：