[发明专利]一种前端单位转换方法、装置、设备和存储介质在审
| 申请号： | 201910689964.4 | 申请日： | 2019-07-29 |
| 公开（公告）号： | CN110515624A | 公开（公告）日： | 2019-11-29 |
| 发明（设计）人： | 杨坤 | 申请（专利权）人： | 济南浪潮数据技术有限公司 |
| 主分类号： | G06F8/40 | 分类号： | G06F8/40 |
| 代理公司： | 11227 北京集佳知识产权代理有限公司 | 代理人： | 刘翠香<国际申请>=<国际公布>=<进入 |
| 地址： | 250101 山东省济南市高新区*** | 国省代码： | 山东;37 |
| 权利要求书： | 查看更多 | 说明书： | 查看更多 |
| 摘要： | |||
| 搜索关键词： | 单位转换 终端屏幕 预设 像素值转换 存储介质 基准终端 开发效率 可控的 模块化 申请 屏幕 灵活 | ||
本申请公开了一种前端单位转换方法，包括以基准终端屏幕的第一宽度值为依据，将像素值转换为rem值；获取预设终端屏幕的第二宽度值；以所述第二宽度值为依据，设置与所述预设终端屏幕对应的html的font‑size。上述前端单位转换方法，能够摆脱px2rem‑loader和webpack的限制，以灵活可控的方式将px单位转换为rem单位，开发效率更高，在非模块化的前端也可以使用，适用范围更广。本申请还公开了前端单位转换装置、设备和存储介质，具有与上述方法同样的优点。
技术领域
本发明属于前端开发技术领域，特别是涉及一种前端单位转换方法装置、设备和存储介质。
背景技术
目前的移动端HTML5开发过程中，为了让页面能适配不同尺寸的移动终端设备，让设计稿在不同尺寸的移动设备上展示效果一致，常用方法就是使用rem自适应布局，rem是CSS3的一个相对单位，就是相对于根元素<html>的font-size来做计算，例如根元素<html>设置的font-size＝12px，非根元素设置width＝2rem，则2rem换算成px单位就是24px。利用rem的特性，在移动端HTML5的开发过程中，用javascript按照一定的规则容易动态设置<html>的font-size，从而可以看出，能够以rem为单位实现适配效果。
目前，设计师的设计图通常选择iPhone6作为基准设计尺寸，交付给前端开发人员的设计尺寸是按750px*1334px为准，所有的单位都是以像素(px)为单位，那么前端开发人员在开发过程中要耗费大精力去计算，以将px单位转换为rem单位，这就降低了程序开发的效率。
现在的将px单位转换为rem单位的方法，是在主页面引入lib-flexible.js然后npm安装px2rem-loader，然后在webpack.config.js里配置，但是这种方法对于没有实现前端模块化和没有使用webpack构建工具的项目来说是无法使用的，导致其应用范围较窄，因此在许多情况下不能应用这种方法实现转换。
发明内容
为解决上述问题，本发明提供了一种前端单位转换方法、装置、设备和存储介质，能够摆脱px2rem-loader和webpack的限制，以灵活可控的方式将px单位转换为rem单位，开发效率更高，在非模块化的前端也可以使用，适用范围更广。
本发明提供的一种前端单位转换方法包括：
以基准终端屏幕的第一宽度值为依据，将像素值转换为rem值；
获取预设终端屏幕的第二宽度值；
以所述第二宽度值为依据，设置与所述预设终端屏幕对应的html的font-size。
优选的，在上述前端单位转换方法中，所述以基准终端屏幕的第一宽度值为依据，将像素值转换为rem值包括：
将所述基准终端屏幕的第一宽度值除以预设值，得到第一相对宽度值；
将所述像素值除以所述第一相对宽度值，得到所述rem值。
优选的，在上述前端单位转换方法中，所述预设值为10至50之间的一个值。
优选的，在上述前端单位转换方法中，所述以所述第二宽度值为依据，设置与所述预设终端屏幕对应的html的font-size为：
将所述第二宽度值除以所述预设值，得到第二相对宽度值；
将所述第二相对宽度值设置为与所述预设终端屏幕对应的html的font-size。
本发明提供的一种前端单位转换装置，包括：
转换部件，用于以基准终端屏幕的第一宽度值为依据，将像素值转换为rem值；
该专利技术资料仅供研究查看技术是否侵权等信息，商用须获得专利权人授权。该专利全部权利属于济南浪潮数据技术有限公司，未经济南浪潮数据技术有限公司许可，擅自商用是侵权行为。如果您想购买此专利、获得商业授权和技术合作，请联系【客服】
本文链接：http://www.vipzhuanli.com/pat/books/201910689964.4/2.html，转载请声明来源钻瓜专利网。
