CN115080027A - web页面自动适配方法、装置、设备及存储介质 - Google Patents

Abstract

本发明公开了一种web页面自动适配方法、装置、设备及存储介质，属于信息处理领域，该方法包括：对web页面设计稿对应的前端代码文件进行解析，得到相应的抽象语法树；遍历所述抽象语法树中的尺寸样式属性，将所述尺寸样式属性中设置的单位作为目标单位；确定换算比例，基于所述换算比例，将所述目标单位换算为预设单位；基于经过单位换算的抽象语法树，实现所述web页面在终端屏幕上的自动适配。本申请能够提高web页面适配效率。

Description

web页面自动适配方法、装置、设备及存储介质

技术领域

本申请涉及信息处理领域，尤其涉及一种web页面自动适配方法、装置、设备及存储介质。

背景技术

由于不同工业设备的屏幕分辨率不同，需要解决web页面与不同终端屏幕都要兼容的问题。

目前解决该问题的方法为：通过媒体查询终端屏幕分辨率，得到web页面的不同尺寸，即，通过媒体查询可以针对不同的屏幕分辨率设置不同的web页面样式，设置得越多就越精确，但这种枚举的方式比较繁琐，且需要人为计算屏幕分辨率和web页面尺寸的对应关系。

因此，现有技术中存在web页面适配效率低的问题。

发明内容

本申请的主要目的在于提供一种web页面自动适配方法、装置、设备及存储介质，旨在解决web页面适配效率低的技术问题。

为实现上述目的，本申请提供一种web页面自动适配方法，所述web页面自动适配方法包括以下步骤：

对web页面设计稿对应的前端代码文件进行解析，得到相应的抽象语法树；

遍历所述抽象语法树中的尺寸样式属性，将所述尺寸样式属性中设置的单位作为目标单位；

确定换算比例，基于所述换算比例，将所述目标单位换算为预设单位；

基于经过单位换算的抽象语法树，实现所述web页面在终端屏幕上的自动适配。

在本申请的一种可能的实施方式中，所述确定换算比例的步骤，包括：

获取终端屏幕分辨率；

基于所述终端屏幕分辨率，确定所述预设单位换算规则中的换算比例。

在本申请的一种可能的实施方式中，所述基于所述终端屏幕分辨率，确定所述预设单位换算规则中的换算比例的步骤，包括：

将所述终端屏幕分辨率的水平像素和垂直像素分别等分为预设份数；

将其中每一份所对应的水平像素和垂直像素分别作为所述换算比例。

在本申请的一种可能的实施方式中，所述基于所述换算比例，对所述目标单位进行换算的步骤，包括：

获取所述尺寸样式属性中设置的目标单位所对应的数值，基于所述换算比例，对所述数值进行计算，得到计算后的数值及其对应的预设单位。

在本申请的一种可能的实施方式中，所述确定换算比例，基于所述换算比例，将所述目标单位换算为预设单位的步骤之后，所述方法还包括：

检测所述计算后的数值及其对应的预设单位是否出现错误，若出现错误，则对所述目标单位重新进行换算。

在本申请的一种可能的实施方式中，所述基于经过单位换算的抽象语法树，实现所述web页面在终端屏幕上的自动适配的步骤，包括：

将所述经过单位换算的抽象语法树进行转换处理，生成新的前端代码文件，以供所述终端屏幕在加载所述web页面时调用所述新的前端代码文件以实现自动适配。

在本申请的一种可能的实施方式中，所述基于经过单位换算的抽象语法树，实现所述web页面在终端屏幕上的自动适配的步骤之后，所述方法还包括：

检测所述终端屏幕显示的web页面的尺寸大小与所述web页面设计稿中的对应尺寸大小是否为等比例变化；

若不是等比例变化，则返回所述遍历所述抽象语法树中的尺寸样式属性，将所述尺寸样式属性中设置的单位作为目标单位的步骤，直至所述对应尺寸大小为等比例变化。

本申请还提供一种web页面自动适配装置，所述装置包括：

解析模块，用于对web页面设计稿对应的前端代码文件进行解析，得到相应的抽象语法树；

确定模块，用于遍历所述抽象语法树中的尺寸样式属性，将所述尺寸样式属性中设置的单位作为目标单位；

换算模块，用于确定换算比例，基于所述换算比例，将所述目标单位换算为预设单位；

适配模块，用于基于经过单位换算的抽象语法树，实现所述web页面在终端屏幕上的自动适配。

本申请还提供一种web页面自动适配设备，所述设备包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的web页面自动适配程序，所述web页面自动适配程序配置为实现如上述任一项所述的web页面自动适配方法的步骤。

本申请还提供一种存储介质，所述存储介质上存储有web页面自动适配程序，所述web页面自动适配程序被处理器执行时实现如上述任一项所述的web页面自动适配方法的步骤。

本申请提供一种web页面自动适配方法，与现有技术中web页面适配效率低相比，本申请通过对web页面设计稿对应的前端代码文件进行解析，得到相应的抽象语法树；遍历所述抽象语法树中的尺寸样式属性，将所述尺寸样式属性中设置的单位作为目标单位；确定换算比例，基于所述换算比例，将所述目标单位换算为预设单位；基于经过单位换算的抽象语法树，实现所述web页面在终端屏幕上的自动适配。可以理解，通过遍历所述抽象语法树，定位尺寸样式属性中设置的目标单位，基于预设换算比例，对目标单位进行换算，过程中不需要人工进行计算，且经过单位换算的抽象语法树可以能够适配不同分辨率的终端屏幕。因此，本申请能够提高web页面适配效率。

附图说明

图1为本申请一种web页面自动适配方法的第一实施例的流程示意图；

图2为本申请第一实施例的web页面自动适配方法的第一场景示意图；

图3为本申请第一实施例的web页面自动适配方法的第二场景示意图；

图4是本申请实施例方案涉及的硬件运行环境的web页面自动适配设备的结构示意图；

本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。

具体实施方式

应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

本发明实施例提供了一种web页面自动适配方法，参照图1，图1为本申请一种web页面自动适配方法的第一实施例的流程示意图。

在本实施例中，所述web页面自动适配方法包括：

步骤S10：对web页面设计稿对应的前端代码文件进行解析，得到相应的抽象语法树；

步骤S20：遍历所述抽象语法树中的尺寸样式属性，将所述尺寸样式属性中设置的单位作为目标单位；

步骤S30：确定换算比例，基于所述换算比例，将所述目标单位换算为预设单位；

步骤S40：基于经过单位换算的抽象语法树，实现所述web页面在终端屏幕上的自动适配。

本实施例旨在：提高web页面适配效率。

作为一种示例，web页面自动适配方法应用于web页面自动适配***，该web页面自动适配***从属于所述web页面自动适配设备。

作为一种示例，该web页面自动适配***可以将生成的web页面自动适配程序应用于终端设备，并将该web页面自动适配程序存储于终端设备中。

作为一种示例，终端设备包括屏幕，不同终端屏幕有不同的分辨率。

作为一种示例，分辨率是度量位图图像内数据量多少的一个参数，通常表示成每英寸像素（Pixel per inch, ppi），包含的数据越多，图形文件的长度就越大，也能表现更丰富的细节，比如在640×480分辨率下只能显示一页内容，在1600×1280分辨率下则能同时显示两页。但更大的文件需要耗用更多的计算机资源，更多的内存，更大的硬盘空间等，假如图形分辨率较低，就会显得相当粗糙，特别是把图像放大为一个较大尺寸观看的时候。所以在图片创建期间，我们须根据图像最终的用途决定正确的分辨率。既要保证图像包含足够多的数据，能满足最终输出的需要，又要适量，尽量少每一份所对应的水平像素用一些计算机的资源。

作为一种示例，分辨率被表示成水平和竖直方向上的像素数量，比如640*480，则表示水平方向上有640个像素，竖直方向上有480个像素，其分辨率为307200像素。

作为一种示例，web开发主要分前端和后端两部分，前端是指直接与用户接触的web页面，即网页；后端是指程序、数据库和服务器层面。web***开发过程主要有项目提出、需求分析、设计、开发、***测试、维护，其中，设计包括界面设计和***设计，开发包括前端开发和后台开发，具体地，前端开发为创建web页面和APP等前端界面呈现给用户的过程，通过HTML、CSS、JavaScript以及衍生出来的技术，来实现互联网产品的用户界面交互。

作为一种示例，前端web开发过程中通过界面设计得到web页面设计稿，该web页面设计稿中包括页面的内容布局和字体等，同时需要保证页面的美观以及清晰可读等客户体验，因此，在设计该web页面时，需要确定web页面尺寸、各内容模块尺寸以及字体行高等，具体不做限定。

作为一种示例，界面设计人员在设计好web页面设计稿后，需要交给前端开发人员基于该web页面设计稿，进行用户界面的开发。

在本实施例中，web页面窗口中不包括地址栏和工具栏的区域为可视区域，为了便于描述，本实施例以web页面的整体尺寸大小，以及可视区域中内容模块的尺寸大小进行具体举例说明。

具体步骤如下：

步骤S10：对web页面设计稿对应的前端代码文件进行解析，得到相应的抽象语法树；

作为一种示例，在前端开发过程中，web页面的尺寸大小需要适配不同终端屏幕，以解决分辨率的兼容问题，而现有技术中是通过媒体查询终端屏幕分辨率，得到web页面的不同尺寸，即，通过媒体查询可以针对不同的屏幕分辨率设置不同的web页面样式，设置得越多就越精确，但这种枚举的方式比较繁琐，且需要人为计算屏幕分辨率和web页面尺寸的对应关系。

在本实施例中，通过编译工具对web页面设计稿对应的前端代码文件进行解析，由于最终需要以程序代码文件的形式来将web页面呈现在终端屏幕上，由于后续要对web页面设计稿中的目标单位进行换算，因此，在此之前，需要将所述web页面设计稿对应的前端代码文件转换为抽象语法树。

作为一种示例，该web页面设计稿对应的前端代码文件中包括web页面框架尺寸信息、各内容模块的尺寸信息以及字体行高的尺寸信息等，具体不做限定。

在本实施例中，所述web页面设计稿对应的前端代码文件中写入的web页面设计稿的尺寸信息与实际对web页面设计稿的尺寸信息一致，为1:1等比例写入。

作为一种示例，该界面设计稿提供的单位为px（像素）或ppi等，具体不做限定。

作为一种示例，抽象语法树（Abstract Syntax Tree，AST）是代码文件语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构，树上的每个节点都表示代码文件中的一种结构。

作为一种示例，编译工具可以是webpack和WebStorm等，具体不做限定，为了便于描述，本实施例以编译工具为webpack进行具体举例说明。

具体地，webpack包括入口、出口、loader（加载工具）和插件，它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

作为一种示例，将所述代码文件转换为抽象语法树的步骤为对代码文件进行词法分析以及语法分析，以树状形式表现语法结构，形成抽象语法树，抽象语法树上有多个树节点，且有很多层，每层都有相同的结构，且将每层结构叫做树节点，树节点中可能包含需要的属性，且只有将代码文件转换为抽象语法树的代码文件才能够被webpack中的插件识别。

步骤S20：遍历所述抽象语法树中的尺寸样式属性，将所述尺寸样式属性中设置的单位作为目标单位；

在本实施例中，通过插件遍历所述抽象语法树中的每个树节点，其中，每个树节点都包含多个尺寸样式属性，将所述尺寸样式属性中设置的单位作为目标单位，相当于确定了与其对应的编译前的web页面设计稿中的尺寸信息。

作为一种示例，在抽象语法树中，所述web页面设计稿中的尺寸信息将以尺寸样式属性进行设置，例如，height属性可设置一个元素的高度，line-height属性可设置行间的距离，max-height属性可设置一个元素的最大高度，max-width可定义一个元素的最大宽度，width属性可设置一个元素的宽度等，具体不做限定。

作为一种示例，在抽象语法树中，web页面设计稿的垂直像素可以是通过height这个类型属性进行表示的，web页面设计稿的段落行高可以是通过line-height这个类型属性进行表示的；抽象语法树中还有以px（像素）为单位的数值，因此，在插件进行遍历所述抽象语法树中树节点之前，需要在插件中录入编译前的web页面设计稿中的尺寸信息，再开始遍历。

步骤S30：确定换算比例，基于所述换算比例，将所述目标单位换算为预设单位；

在本实施例中，确定尺寸样式属性中设置的目标单位之后，确定换算比例，即可基于该换算比例，对目标单位进行换算，得到换算后的目标单位，替换原来抽象语法树种的尺寸样式属性中设置的目标单位。

在本实施例中，所述确定换算比例的步骤，包括：

步骤A1：获取终端屏幕分辨率；

步骤A2：基于所述终端屏幕分辨率，确定所述预设单位换算规则中的换算比例。

作为一种示例，安装像素单位转换的babel插件，在transformPx.config文件中写入预设单位换算规则，例如换算中遇到除不尽的保留几位小数和换算比例等，具体不做限定，src文件是存放开发web页面的文件，main.js是整个web页面开发的入口文件。

在本实施例中，通过读取终端的配置信息，获取终端屏幕分辨率。

作为一种示例，屏幕分辨率须小于或等于终端显示器分辨率，而终端显示器分辨率描述的是显示器自身的像素点数量，是固有的、不可改变的。

在本实施例中，基于所述终端屏幕分辨率，确定所述预设单位换算规则中的换算比例。

在本实施例中，所述基于所述终端屏幕分辨率，确定所述预设单位换算规则中的换算比例的步骤，包括：

步骤B1：将所述终端屏幕分辨率的水平像素和垂直像素分别等分为预设份数；

在本实施例中，将所述终端屏幕分辨率的水平像素和垂直像素分别等分为预设份数，其中，所述预设份数可以是固定的、人为设定的或者随机改变的，具体不做限定。

作为一种示例，如图2所示，若所述终端屏幕分辨率为1920px*969px，则所述终端屏幕分辨率的水平像素为1920px，所述终端屏幕分辨率的垂直像素为969px，将水平像素和垂直像素分别等分为预设份数，若预设份数为100份，则所述每一份所对应的水平像素为19.2px，每一份所对应的垂直像素为9.69px。

步骤B2：将其中每一份所对应的水平像素和垂直像素分别作为所述换算比例。

在本实施例中，将其中每一份所对应的水平像素和垂直像素分别作为所述换算比例。

作为一种示例，则将上述每一份所对应的水平像素为19.2px作为水平像素单位的换算比例，将每一份所对应的垂直像素为9.69px作为垂直像素单位的换算比例。

作为一种示例，所述每一份所对应的水平像素为19.2px，可以表示为1vw或1nw所对应的水平像素为19.2px，1vh或1nh所每一份所对应的水平像素的垂直像素为9.69px，具体不做限定。

为了便于描述，以下以1vw所每一份所对应的水平像素为19.2px，1vh所每一份所对应的水平像素的垂直像素为9.69px进行具体举例说明。

在本实施例中，所述基于所述换算比例，对所述目标单位进行换算的步骤，包括：

步骤C1：获取所述尺寸样式属性中设置的目标单位所对应的数值，基于所述换算比例，对所述数值进行计算，得到计算后的数值及其对应的预设单位。

在本实施例中，获取所述尺寸样式属性中设置的目标单位所对应的数值，基于所述换算比例，对所述数值进行计算，得到计算后的数值及其对应的预设单位。

作为一种示例，若所述web页面设计稿的尺寸大小为900px*600px，则基于所述换算比例，对所述目标单位px进行换算，将上述换算比例变换为1px=（1/19.2）vw，1px=（1/9.69）vh，因此900px*600px可以表示为（900*1/19.2）vw*（600*1/9.69）vh。

步骤S30：基于经过单位换算的抽象语法树，实现所述web页面在终端屏幕上的自动适配。

在本实施例中，上述经过单位换算后的目标单位，替换原本的目标单位存储在所述抽象语法树中，该经过单位换算后的抽象语法树适配不同分辨率的终端屏幕。

在本实施例中，所述确定换算比例，基于所述换算比例，将所述目标单位换算为预设单位的步骤之后，所述方法还包括：

步骤D1：将所述经过单位换算的抽象语法树进行转换处理，生成新的前端代码文件，以供所述终端屏幕在加载所述web页面时调用所述新的前端代码文件以实现自动适配。

在本实施例中，将所述经过单位换算的抽象语法树转换为新的前端代码文件后，所述新的代码文件中尺寸样式属性中设置的单位都为换算后的目标单位，因此，所述新的前端代码文件适配不同分辨率的终端屏幕。

作为一种示例，如图2和图3所示，图中的web页面中包含px按钮和vw按钮两个内容模块，px按钮是以px单位存在于执行代码文件中，vw按钮是转换单位后以vw单位存在于执行代码文件中。若终端屏幕分辨率调整为1280px*697px后，所述web页面的尺寸大小会随之改变，且web页面中的vw按钮的尺寸大小也会改变，但px按钮的尺寸大小不会随之改变，因此，经过单位换算后的抽象语法树转换为新的代码文件，在执行所述代码文件后，才可以适配不同分辨率的终端屏幕。

在本实施例中，通过将web页面设计稿中尺寸直接写入代码文件，基于预设单位换算规则以及换算比例，对web页面设计稿中的尺寸的单位进行换算，不需要每次都根据这个换算比例去计算，只需把web页面设计稿中尺寸写入配置文件中，前端开发时按照效果图进行1:1开发，且无需考虑不同的显示器的分辨率，在代码文件编译运行时就自动把单位自动进行换算，则不需要人工进行计算，以达到自动适配不同分辨率的终端屏幕的目的，提高了web页面适配效率。

进一步地，基于本申请中第一实施例，提供本申请的另一实施例，在该实施例中，所述获取所述尺寸样式属性中设置的目标单位所对应的数值，基于所述换算比例，对所述数值进行计算，得到计算后的数值及其对应的预设单位的步骤之后，所述方法还包括：

步骤D1：检测所述计算后的数值及其对应的预设单位是否出现错误，若出现错误，则对所述目标单位重新进行换算。

在本实施例中，由于上述对目标单位进行换算的过程中可能会出现漏算或错算，因此本实施例通过对所述预设单位换算规则进行源代码文件变换，在其中加入错误检测机制，以检测换算结果是否出现错误，若出现错误，则基于错误定位机制定位该出现结果的目标单位所在位置，以对所述目标单位进行重新换算。

作为一种示例，所述错误检测机制可以是基于预设单位错误换算规则，将各目标单位输入至预设错误检测模型中，对所述各目标单位进行错误换算，得到可能出现的换算错误结果，所述预设错误检测模型是通过将带有错误换算结果标签的各目标单位输入至预设模型进行迭代训练得到的。当各目标单位换算结束后，得到第一换算结果，将所述目标单位输入至所述预设错误检测模型，得到第二换算结果，将该结果与所述第二换算结果进行比对，若一致，则确定所述目标单位换算错误。

作为一种示例，若所述预设错误定位机制没有定位到出现错误的目标单位，则其出现错误的根源可能不在换算单位的过程中，而是出现在目标单位写入代码文件的过程中，可以进一步对目标单位写入代码文件的过程加入监测机制。

在本实施例中，在将经过单位换算后的抽象语法树转换为新的代码文件之后，可能最终展现给用户的界面与预想应该展现的画面有所偏差，例如，某一块内容模块的分辨率没有跟随整个页面进行更改，或者页面某块内容模块的某个角是偏斜的，因此，需要对经过单位换算的新的代码文件的呈现进行进一步检测。

在本实施例中，所述基于经过单位换算的抽象语法树，实现所述web页面在终端屏幕上的自动适配的步骤之后，所述方法还包括：

步骤E1：检测所述终端屏幕显示的web页面的尺寸大小与所述web页面设计稿中的对应尺寸大小是否为等比例变化；

步骤E1：若不是等比例变化，则返回所述遍历所述抽象语法树中的尺寸样式属性，将所述尺寸样式属性中设置的单位作为目标单位的步骤，直至所述对应尺寸大小为等比例变化。

在本实施例中，运行所述经过单位换算的新的代码文件，得到web页面，检测所述web页面的尺寸大小与所述web页面设计稿中的对应尺寸大小是否为等比例变化，该等比例即为上述预设单位换算规则中的换算比例，其中，所述web页面的尺寸大小包括web页面框架的尺寸大小、内容模块的尺寸大小以及段落行高的尺寸大小。

在本实施例中，若检测到不是等比例变化，则返回遍历所述抽象语法树中的尺寸样式属性，将所述尺寸样式属性中设置的单位作为目标单位的步骤，直至所述对应尺寸大小为等比例变化。以保证最终展现给用户的界面不会造成视觉上的不适。

在本实施例中，通过对单位换算过程中可能出现的换算错误问题进行监测并修正，以及对代码文件生成后web页面在交付过程中可能出现的问题进行检测并修改，以保证最终展现给用户的界面就是web设计稿所想要实现的界面效果的等比例缩小或放大的版本，给用户带来更加舒适的界面交互体验。

本申请还提供一种web页面自动适配装置，所述装置包括：

解析模块，用于对web页面设计稿对应的前端代码文件进行解析，得到相应的抽象语法树；

确定模块，用于遍历所述抽象语法树中的尺寸样式属性，将所述尺寸样式属性中设置的单位作为目标单位；

换算模块，用于确定换算比例，基于所述换算比例，将所述目标单位换算为预设单位；

适配模块，用于基于经过单位换算的抽象语法树，实现所述web页面在终端屏幕上的自动适配。

可选地，在本申请的一种可能的实施方式中，所述换算模块包括：

获取单元，用于获取终端屏幕分辨率；

确定单元，用于基于所述终端屏幕分辨率，确定所述预设单位换算规则中的换算比例；

可选地，在本申请的一种可能的实施方式中，所述确定单元用于将所述终端屏幕分辨率的水平像素和垂直像素分别等分为预设份数；还用于将其中每一份所对应的水平像素和垂直像素分别作为所述换算比例。

可选地，在本申请的一种可能的实施方式中，所述换算模块还包括：

计算单元，用于获取所述尺寸样式属性中设置的目标单位所对应的数值，基于所述换算比例，对所述数值进行计算，得到计算后的数值及其对应的预设单位。

可选地，在本申请的一种可能的实施方式中，所述获取所述尺寸样式属性中设置的目标单位所对应的数值，基于所述换算比例，对所述数值进行计算，得到计算后的数值及其对应的预设单位的步骤之后，所述装置还包括：

变换模块，用于检测所述计算后的数值及其对应的预设单位是否出现错误，若出现错误，则对所述目标单位重新进行换算。

可选地，在本申请的一种可能的实施方式中，所述适配模块包括：

转换单元，用于将所述经过单位换算的抽象语法树进行转换处理，生成新的前端代码文件，以供所述终端屏幕在加载所述web页面时调用所述新的前端代码文件以实现自动适配。

可选地，在本申请的一种可能的实施方式中，所述基于经过单位换算的抽象语法树，实现所述web页面在终端屏幕上的自动适配的步骤之后，所述装置还包括：

检测模块，用于检测所述终端屏幕显示的web页面的尺寸大小与所述web页面设计稿中的对应尺寸大小是否为等比例变化；

返回模块，用于若不是等比例变化，则返回遍历所述抽象语法树中的尺寸样式属性，将所述尺寸样式属性中设置的单位作为目标单位的步骤，直至所述对应尺寸大小为等比例变化。

本申请web页面自动适配装置的具体实施方式与上述web页面自动适配各实施例基本相同，在此不再赘述。

本申请实施例提供了一种存储介质，且所述存储介质存储有一个或者一个以上程序，所述一个或者一个以上程序还可被一个或者一个以上的处理器执行以用于实现上述任一项所述的web页面自动适配方法的步骤。

本申请存储介质具体实施方式与上述web页面自动适配方法各实施例基本相同，在此不再赘述。

参照图4，图4是本申请实施例方案涉及的硬件运行环境的设备结构示意图。

如图4所示，该web页面自动适配设备可以包括：处理器1001，存储器1005，通信总线1002。通信总线1002用于实现处理器1001和存储器1005之间的连接通信。

可选地，该web页面自动适配设备还可以包括用户接口、网络接口、摄像头、RF（Radio Frequency，射频）电路，传感器、WiFi模块等等。用户接口可以包括显示屏（Display）、输入子模块比如键盘（Keyboard），可选用户接口还可以包括标准的有线接口、无线接口。网络接口可以包括标准的有线接口、无线接口（如WI-FI接口）。

本领域技术人员可以理解，图4中示出的web页面自动适配设备结构并不构成对web页面自动适配设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。

如图4所示，作为一种存储介质的存储器1005中可以包括操作***、网络通信模块以及web页面自动适配程序。操作***是管理和控制web页面自动适配设备硬件和软件资源的程序，支持web页面自动适配程序以及其它软件和/或程序的运行。网络通信模块用于实现存储器1005内部各组件之间的通信，以及与web页面自动适配***中其它硬件和软件之间通信。

在图4所示的web页面自动适配设备中，处理器1001用于执行存储器1005中存储的web页面自动适配程序，实现上述任一项所述的web页面自动适配方法的步骤。

本申请web页面自动适配设备具体实施方式与上述web页面自动适配方法各实施例基本相同，在此不再赘述。

需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者***不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者***所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者***中还存在另外的相同要素。

上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。

上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在如上所述的一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端屏幕设备(可以是手机，计算机，服务器，空调器，或者网络设备等)执行本发明各个实施例所述的方法。

以上仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims (10)

1.一种web页面自动适配方法，其特征在于，所述web页面自动适配方法包括以下步骤：

对web页面设计稿对应的前端代码文件进行解析，得到相应的抽象语法树；

遍历所述抽象语法树中的尺寸样式属性，将所述尺寸样式属性中设置的单位作为目标单位；

确定换算比例，基于所述换算比例，将所述目标单位换算为预设单位；

基于经过单位换算的抽象语法树，实现所述web页面在终端屏幕上的自动适配。

2.如权利要求1所述的web页面自动适配方法，其特征在于，所述确定换算比例的步骤，包括：

获取终端屏幕分辨率；

基于所述终端屏幕分辨率，确定所述预设单位换算规则中的换算比例。

3.如权利要求2所述的web页面自动适配方法，其特征在于，所述基于所述终端屏幕分辨率，确定所述预设单位换算规则中的换算比例的步骤，包括：

将所述终端屏幕分辨率的水平像素和垂直像素分别等分为预设份数；

将其中每一份所对应的水平像素和垂直像素分别作为所述换算比例。

4.如权利要求1所述的web页面自动适配方法，其特征在于，所述基于所述换算比例，对所述目标单位进行换算的步骤，包括：

获取所述尺寸样式属性中设置的目标单位所对应的数值，基于所述换算比例，对所述数值进行计算，得到计算后的数值及其对应的预设单位。

5.如权利要求4所述的web页面自动适配方法，其特征在于，所述获取所述尺寸样式属性中设置的目标单位所对应的数值，基于所述换算比例，对所述数值进行计算，得到计算后的数值及其对应的预设单位的步骤之后，所述方法还包括：

检测所述计算后的数值及其对应的预设单位是否出现错误，若出现错误，则对所述目标单位重新进行换算。

6.如权利要求1所述的web页面自动适配方法，其特征在于，所述基于经过单位换算的抽象语法树，实现所述web页面在终端屏幕上的自动适配的步骤，包括：

将所述经过单位换算的抽象语法树进行转换处理，生成新的前端代码文件，以供所述终端屏幕在加载所述web页面时调用所述新的前端代码文件以实现自动适配。

7.如权利要求1所述的web页面自动适配方法，其特征在于，所述基于经过单位换算的抽象语法树，实现所述web页面在终端屏幕上的自动适配的步骤之后，所述方法还包括：

检测所述终端屏幕显示的web页面的尺寸大小与所述web页面设计稿中的对应尺寸大小是否为等比例变化；

若不是等比例变化，则返回所述遍历所述抽象语法树中的尺寸样式属性，将所述尺寸样式属性中设置的单位作为目标单位的步骤，直至所述对应尺寸大小为等比例变化。

8.一种web页面自动适配装置，其特征在于，所述装置包括：

解析模块，用于对web页面设计稿对应的前端代码文件进行解析，得到相应的抽象语法树；

确定模块，用于遍历所述抽象语法树中的尺寸样式属性，将所述尺寸样式属性中设置的单位作为目标单位；

换算模块，用于确定换算比例，基于所述换算比例，将所述目标单位换算为预设单位；

适配模块，用于基于经过单位换算的抽象语法树，实现所述web页面在终端屏幕上的自动适配。

9.一种web页面自动适配设备，其特征在于，所述设备包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的web页面自动适配程序，所述web页面自动适配程序配置为实现如权利要求1至7中任一项所述的web页面自动适配方法的步骤。

10.一种存储介质，其特征在于，所述存储介质上存储有web页面自动适配程序，所述web页面自动适配程序被处理器执行时实现如权利要求1至7任一项所述的web页面自动适配方法的步骤。

Images