一种前端设计稿自动兼容多尺寸屏幕方法及其相关装置制造方法及图纸

本申请公开了一种前端设计稿自动兼容多尺寸屏幕方法及其相关装置，方法包括：根据设计稿定义的屏幕宽度计算像素单位转换为目标单位的转换倍数；获取待转换样式，根据转换倍数将待转换样式中的像素单位转换为目标单位，得到转换后样式，并采用转换后样式替换待转换样式，改善了现有技术为了适配多尺寸屏幕，需要人工估算设计稿中每个元素样式的尺寸大小存在的效率低以及无法保证UI还原度和设计稿一致的技术问题。一致的技术问题。一致的技术问题。

【技术实现步骤摘要】
一种前端设计稿自动兼容多尺寸屏幕方法及其相关装置


[0001]本申请涉及计算机
，尤其涉及一种前端设计稿自动兼容多尺寸屏幕方法及其相关装置。

技术介绍

[0002]随着UI设计的发展，各类设计软件层出不穷，且均可实现代码化，即通过设计源文件可知道页面各模块的基本样式，包括尺寸、颜色等。而此时的尺寸一般都是以像素px为单位，但开发时经常要做到多尺寸兼容，尤其是移动端和可视化大屏的开发，一般会用到vw来做适配。前端工程师在对着设计稿做开发时，由于要考虑多尺寸兼容，通常不能直接按照设计稿的尺寸来，需要人工目测估算每个元素样式的尺寸大小，在不专门做适配的情况下，设计稿还原度做不到多尺寸都是100％，存在效率低，以及无法保证UI还原度和设计稿一致的问题。

技术实现思路

[0003]本申请提供了一种前端设计稿自动兼容多尺寸屏幕方法及其相关装置，用于改善现有技术为了适配多尺寸屏幕，需要人工估算设计稿中每个元素样式的尺寸大小存在的效率低以及无法保证UI还原度和设计稿一致的技术问题。
[0004]有鉴于此，本申请第一方面提供了一种前本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种前端设计稿自动兼容多尺寸屏幕方法，其特征在于，包括：根据设计稿定义的屏幕宽度计算像素单位转换为目标单位的转换倍数；获取待转换样式，根据所述转换倍数将所述待转换样式中的像素单位转换为目标单位，得到转换后样式，并采用所述转换后样式替换所述待转换样式。2.根据权利要求1所述的前端设计稿自动兼容多尺寸屏幕方法，其特征在于，所述获取待转换样式，根据所述转换倍数将所述待转换样式中的像素单位转换为目标单位，得到转换后样式，并采用所述转换后样式替换所述待转换样式，包括：获取所有style标签下的css样式，得到待转换样式；根据所述转换倍数将所述待转换样式中的像素单位转换为目标单位，得到转换后样式；采用所述转换后样式替换对应的style标签下的所述css样式。3.根据权利要求1所述的前端设计稿自动兼容多尺寸屏幕方法，其特征在于，所述获取待转换样式，根据所述转换倍数将所述待转换样式中的像素单位转换为目标单位，得到转换后样式，并采用所述转换后样式替换所述待转换样式，包括：S1、获取body标签下第一层级的dom元素；S2、获取所述dom元素的style属性下的样式，得到待转换样式，根据所述转换倍数将所述待转换样式中的像素单位转换为目标单位，得到转换后样式，并采用所述转换后样式替换转换前的所述dom元素的style属性下的样式；S3、获取所述body标签下一层级的dom元素，并返回步骤S2，直至将所述body标签下的所有层级的dom元素的style属性下的样式中的像素单位转换为目标单位。4.一种前端设计稿自动兼容多尺寸屏幕装置，其特征在于，包括：计算单元，用于根据设计稿定义的屏幕宽度计算像素单位转换为目标单位的转换倍数；转换单元，用于获取待转...

【专利技术属性】
技术研发人员：陈林鑫，张继东，赵子颖，黄毓铭，
申请(专利权)人：天翼数字生活科技有限公司，
类型：发明
国别省市：