页面适配方法、装置、计算机设备及存储介质制造方法及图纸

本申请提出一种页面适配方法、装置、计算机设备及存储介质，该方法包括：获取显示页面的当前窗口尺寸、页面原始尺寸及所述页面中的根元素的第一字号；根据所述当前窗口尺寸和所述页面原始尺寸计算宽度变化比和高度变化比，其中所述当前窗口尺寸包括窗口宽度和窗口高度，所述页面原始尺寸包括页面宽度和页面高度；基于所述宽度变化比和所述高度变化比确定元素缩放比，根据所述元素缩放比及所述根元素的第一字号获取所述根元素的第二字号。该方法可使页面中的元素按照根元素的第一字号的变化自动缩放以适配不同屏幕分辨率的电子设备，并根据当前窗口尺寸的变化及时调整根元素的第一字号，进而调整页面中所有元素的尺寸。

【技术实现步骤摘要】
页面适配方法、装置、计算机设备及存储介质
本申请涉及计算机
，具体涉及一种页面适配方法、装置、计算机设备及存储介质。
技术介绍
随着科技的发展，各种类型的电子设备越来越多，并且不同电子设备上的屏幕分辨率也各不相同。电子设备中的浏览器需要将Web服务器中的文件解析并渲染成可视化的页面，那么为了使页面适配不同屏幕分辨率的电子设备，前端工程师往往需要根据一张页面针对不同的电子设备开发对应的版本，以使得页面内容可以完整、清晰地展示。随着前端技术的模块化和工程化，各种相应的框架和方案也逐渐成熟，包括Vue、React等框架都提供了组件化能力和脚手架工程,提高了模块化能力进而提高了开发效率。前端工程师根据页面设计稿开发出对应的页面后,通过调用接口获取数据填充到页面上,联调完成通过测试后,将前端代码打包部署发布到Web服务器。目前常见的页面适配方案包括栅格布局和媒体查询。栅格布局，是一种自适应布局，由栅格容器和栅格项目组成，能够根据不同的屏幕分辨率自动伸缩容器的尺寸，但该方式对于历史项目来说，需要修改原有代码，侵入性较大，且会增加额外的本文档来自技高网...

【技术保护点】
1.一种页面适配方法，其特征在于，包括：/n获取显示页面的当前窗口尺寸、页面原始尺寸及所述页面中的根元素的第一字号；/n根据所述当前窗口尺寸和所述页面原始尺寸计算宽度变化比和高度变化比，其中所述当前窗口尺寸包括窗口宽度和窗口高度，所述页面原始尺寸包括页面宽度和页面高度；/n基于所述宽度变化比和所述高度变化比确定元素缩放比，根据所述元素缩放比及所述根元素的第一字号获取所述根元素的第二字号。/n

【技术特征摘要】
1.一种页面适配方法，其特征在于，包括：
获取显示页面的当前窗口尺寸、页面原始尺寸及所述页面中的根元素的第一字号；
根据所述当前窗口尺寸和所述页面原始尺寸计算宽度变化比和高度变化比，其中所述当前窗口尺寸包括窗口宽度和窗口高度，所述页面原始尺寸包括页面宽度和页面高度；
基于所述宽度变化比和所述高度变化比确定元素缩放比，根据所述元素缩放比及所述根元素的第一字号获取所述根元素的第二字号。


2.根据权利要求1所述的页面适配方法，其特征在于，包括：在“根据所述当前窗口尺寸和所述页面原始尺寸计算宽度变化比和高度变化比”前，包括步骤：判断所述当前窗口尺寸是否匹配所述页面原始尺寸，若不匹配则继续执行后续计算宽度变化比和高度变化比的步骤。


3.根据权利要求1所述的页面适配方法，其特征在于，包括：在“获取显示页面的当前窗口尺寸、页面原始尺寸及所述页面中的根元素的第一字号”前，包括步骤：监听显示页面的当前窗口尺寸是否改变，若改变则继续执行后续的获取步骤。


4.根据权利要求1所述的页面适配方法，其特征在于，所述宽度变化比为：所述窗口宽度与所述页面宽度的差与所述页面宽度的比值的绝对值；所述高度变化比为：所述窗口高度与所述页面高度的差与所述页面高度的比值的绝对值。


5.根据权利要求1所述的页面适配方法，其特征在于，“基于所述宽度变化比和所述高度变化比确定元素缩放比”包括：若所述宽度变化比大于所述高度变化比，所述窗口高度与所述页面高度的比值作为元素缩放比，否则所述窗口宽度与所述页面宽度的比值作为所述元素缩放比。
...

【专利技术属性】
技术研发人员：李圣权，沈自强，杨彬，
申请(专利权)人：城云科技中国有限公司，
类型：发明
国别省市：浙江;33