[发明专利]页面适配方法及装置

说明书

本公开是关于页面适配方法及装置。该方法包括：获取页面设计稿中各元素的设计大小，设计大小用响应式单位表示，响应式单位的值跟随设备屏幕大小的变化而变化；将响应式单位转换为目标设备屏幕对应的目标单位以及响应式单位在目标单位下的对应值；根据转换后的目标单位以及响应式单位在目标单位下的对应值生成新的样式文件。其中，定义一个统一的响应式单位，所有元素与页面均保持一致的定义与编写，从而减少开发者的理解成本，使得开发者无需改动代码便可实现元素与页面之间的无缝迁移。通过目标单位与目标等份的统一配置，可以实现页面适配方案的统一管理，可快速支持设计稿的大小与等份的调整以及新单位的支持。

技术领域

本公开涉及网页设计技术领域，尤其涉及页面适配方法及装置。

背景技术

在开发移动端页面时，由于存在不同的屏幕尺寸，如果页面采用固定尺寸开发，则在小屏幕设备上会出现滚动条，大屏幕设备上会出现空白区域，所以移动端页面需对不同屏幕尺寸适配，将页面调整成当前屏幕的大小，保证用户浏览的体验的一致性，避免出现滚动条与空白区域。

目前通常的实现方案是开发者在开发页面时，编写样式(css)文件时对于涉及元素大小、位置等均采用rem单位，如果设计稿为750像素宽，采用的等份为10等份，则1等份为75像素，元素大小或位置的rem值为视觉稿的元素大小或位置像素值除以75，即按钮元素宽度为75像素时，对应的rem值为1rem，但rem单位值是对设计稿的像素值换算后的值，需开发者基于不同等份换算，效率较低。

发明内容

为克服相关技术中存在的问题，本公开实施例提供页面适配方法及装置。所述技术方案如下：

根据本公开实施例的第一方面，提供一种页面适配方法，包括：

获取页面设计稿中各元素的设计大小，所述设计大小用响应式单位表示，所述响应式单位的值跟随设备屏幕大小的变化而变化；

将所述响应式单位转换为目标设备屏幕对应的目标单位以及所述响应式单位在所述目标单位下的对应值；

根据转换后的所述目标单位以及所述响应式单位在所述目标单位下的对应值生成新的样式文件。

本公开的实施例提供的技术方案可以包括以下有益效果：本公开实施例提供一种页面适配方法，包括：获取页面设计稿中各元素的设计大小，设计大小用响应式单位表示，响应式单位的值跟随设备屏幕大小的变化而变化；将响应式单位转换为目标设备屏幕对应的目标单位以及响应式单位在目标单位下的对应值；根据转换后的目标单位以及响应式单位在目标单位下的对应值生成新的样式文件。其中，定义一个统一的响应式单位，所有元素与页面均保持一致的定义与编写，从而减少开发者的理解成本，使得开发者无需改动代码便可实现元素与页面之间的无缝迁移。再者，由于采用统一的响应式单位，在编译阶段即可转换成任意的页面适配方案，通过目标单位与目标等份的统一配置，从而实现页面适配方案的统一管理，可快速支持设计稿的大小与等份的调整以及新单位的支持。

在一个实施例中，所述将所述响应式单位转换为目标设备屏幕对应的目标单位以及所述响应式单位在所述目标单位下的对应值，包括：

获取所述目标单位与目标等份值的配置信息；

依次读取项目中的样式文件；

解析所述样式文件得到样式语法树，所述样式语法树中包括：语句声明以及规则声明；

遍历所述样式语法树中的所述语句声明以及所述规则声明，将所述响应式单位转换为所述目标单位以及所述响应式单位在所述目标单位下的对应值。

在一个实施例中，所述将所述响应式单位转换为所述目标单位以及所述响应式单位在所述目标单位下的对应值，包括：

根据所述响应式单位与目标等份值的比值确定所述响应式单位在所述目标单位下的对应值。