页面适配方法及装置制造方法及图纸

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

【技术实现步骤摘要】
页面适配方法及装置
本公开涉及网页设计
，尤其涉及页面适配方法及装置。
技术介绍
在开发移动端页面时，由于存在不同的屏幕尺寸，如果页面采用固定尺寸开发，则在小屏幕设备上会出现滚动条，大屏幕设备上会出现空白区域，所以移动端页面需对不同屏幕尺寸适配，将页面调整成当前屏幕的大小，保证用户浏览的体验的一致性，避免出现滚动条与空白区域。目前通常的实现方案是开发者在开发页面时，编写样式(css)文件时对于涉及元素大小、位置等均采用rem单位，如果设计稿为750像素宽，采用的等份为10等份，则1等份为75像素，元素大小或位置的rem值为视觉稿的元素大小或位置像素值除以75，即按钮元素宽度为75像素时，对应的rem值为1rem，但rem单位值是对设计稿的像素值换算后的值，需开发者基于不同等份换算，效率较低。
技术实现思路
为克服相关技术中存在的问题，本公开实施例提供页面适配方法及装置。所述技术方案如下：根据本公开实施例的第一方面，提供一种页面适配方法，包括：获取页面设计稿中各元素的设计大小，所述设计大小用响应式本文档来自技高网...

【技术保护点】
1.一种页面适配方法，其特征在于，包括：/n获取页面设计稿中各元素的设计大小，所述设计大小用响应式单位表示，所述响应式单位的值跟随设备屏幕大小的变化而变化；/n将所述响应式单位转换为目标设备屏幕对应的目标单位以及所述响应式单位在所述目标单位下的对应值；/n根据转换后的所述目标单位以及所述响应式单位在所述目标单位下的对应值生成新的样式文件。/n

【技术特征摘要】
1.一种页面适配方法，其特征在于，包括：
获取页面设计稿中各元素的设计大小，所述设计大小用响应式单位表示，所述响应式单位的值跟随设备屏幕大小的变化而变化；
将所述响应式单位转换为目标设备屏幕对应的目标单位以及所述响应式单位在所述目标单位下的对应值；
根据转换后的所述目标单位以及所述响应式单位在所述目标单位下的对应值生成新的样式文件。


2.根据权利要求1所述的方法，其特征在于，所述将所述响应式单位转换为目标设备屏幕对应的目标单位以及所述响应式单位在所述目标单位下的对应值，包括：
获取所述目标单位与目标等份值的配置信息；
依次读取项目中的样式文件；
解析所述样式文件得到样式语法树，所述样式语法树中包括：语句声明以及规则声明；
遍历所述样式语法树中的所述语句声明以及所述规则声明，将所述响应式单位转换为所述目标单位以及所述响应式单位在所述目标单位下的对应值。


3.根据权利要求2所述的方法，其特征在于，所述将所述响应式单位转换为所述目标单位以及所述响应式单位在所述目标单位下的对应值，包括：
根据所述响应式单位与目标等份值的比值确定所述响应式单位在所述目标单位下的对应值。


4.根据权利要求1所述的方法，其特征在于，所述根据转换后的所述目标单位以及所述响应式单位在所述目标单位下的对应值生成新的样式文件，包括：
根据vw单位设置根节点字号属性；
在body节点上还原设备默认字号；
根据所述响应式单位在所述目标单位下的对应值、所述根节点字号属性和所述设备默认字号生成所述新的样式文件。


5.根据权利要求4所述的方法，其特征在于，所述方法还包括：
在所述body节点上增加最大宽度设置参数；
所述根据所述响应式单位在所述目标单位下的对应值、所述根节点字号属性和所述设备默认字号生成所述新的样式文件，包括：
根据所述响应式单位在所述目标单...

【专利技术属性】
技术研发人员：龙佳，谭兵琴，
申请(专利权)人：无线生活杭州信息科技有限公司，
类型：发明
国别省市：浙江;33