(19)中华人民共和国国家知识产权局
正则匹配后缀后
(12)发明专利说明书
(10)申请公布号 CN 110109671 A
(43)申请公布日 2019.08.09
(21)申请号 CN201910153084.5
(22)申请日 2019.02.28
(71)申请人 深圳点猫科技有限公司
    地址 518000 广东省深圳市粤海街道中心路3331号中建钢构大厦25-26层
(72)发明人 李天驰 孙悦
(74)专利代理机构 广东良马律师事务所
    代理人 李良
(51)Int.CI
     
                                                                  权利要求说明书 说明书 幅图
(54)发明名称
      一种webpack标签尺寸样式转换方法及装置
(57)摘要
      本发明公开了一种webpack标签尺寸样式转换方法及装置，其中，所述方法包括步骤：A.设置webpack的基本配置；B.对文件目录进行递归查询，判断文件类型；C.根据文件类型，匹配文件对应的标签，并将文件对应的标签匹配像素属性；D.获取像素属性的像素单位信息，并将像素单位转换为对应设备能够兼容的单位，并替换掉所述像素单位，本发明所述方案，使用解决方案中的方法编写一个Loader，然后使用loader+webpack将px自动转换成rem或vw单位，来使单位被设备兼容。
法律状态
法律状态公告日
法律状态信息
法律状态
2023-05-16
授权
发明专利权授予
权 利 要 求 说 明 书
1.一种webpack标签尺寸样式转换方法,其特征在于,包括步骤:
A.设置webpack的基本配置;
B.对文件目录进行递归查询,判断文件类型;
C.根据文件类型,匹配文件对应的标签,并将文件对应的标签匹配像素属性;
D.获取像素属性的像素单位信息,并将像素单位转换为对应设备能够兼容的单位,并替换掉所述像素单位。
2.根据权利要求1所述的webpack标签尺寸样式转换方法,其特征在于,所述步骤A中,webpack的基本配置包括基础路径、输出路径、编译优化、当前环境。
3.根据权利要求1所述的webpack标签尺寸样式转换方法,其特征在于,所述步骤A包括:
安装css处理器,通过所述css处理器可讲less格式的层叠样式表文件输出为css格式,即当前环境能够兼容并编译的格式。
4.根据权利要求3所述的webpack标签尺寸样式转换方法,其特征在于,所述步骤B包括:
设置文件后缀正则表达式,用于区分文件后缀名;
设置标签正则表达式,用于匹配文件中的标签,只转换该标签中的像素单位;
对文件目录进行递归查询;
根据文件的后缀名,判断文件类型,并将文件类型通过css处理器转换为可编译的类型。
5.根据权利要求4所述的webpack标签尺寸样式转换方法,其特征在于,所述步骤C包括:
通过标签正则表达式,匹配文件类型对应的标签;
提取标签的style属性;
判断标签的style属性是否有像素属性,当是时,执行步骤D。
6.根据权利要求6所述的webpack标签尺寸样式转换方法,其特征在于,所述步骤D包括:
获取像素单位信息,并获取屏幕的高度;
计算所述像素单位与屏幕的比例系数;
利用比例系数,将像素单位计算为当前环境可兼容的格式的单位;
将计算后的单元替换原来的像素单位。
7.一种webpack标签尺寸样式转换装置,其特征在于,所述装置包括至少一个处理器;以及,与所述至少一个处理器通信连接的存储器;其中,
所述存储器存储有可被所述至少一个处理器执行的指令,所述指令被所述至少一个处理器执行,以使所述至少
一个处理器能够执行权利要求1-6任一项所述的webpack标签尺寸样式转换方法。
8.一种非易失性计算机可读存储介质,其特征在于,所述非易失性计算机可读存储介质存储有计算机可执行指令,该计算机可执行指令被一个或多个处理器执行时,可使得所述一个或多个处理器执行权利要求1-6任一项所述的webpack标签尺寸样式转换方法。
9.一种计算机程序产品,其特征在于,所述计算机程序产品包括存储在非易失性计算机可读存储介质上的计算机程序,所述计算机程序包括程序指令,当所述程序指令被处理器执行时,使所述处理器执行权利要求1-6任一项所述的webpack标签尺寸样式转换方法。
说  明  书
<p>技术领域
本发明涉及教育系统领域,尤其涉及一种webpack标签尺寸样式转换方法及装置。
背景技术
rem和vw是手机设备支持的单位,在面临多设备应用时,无法完成自动转换会造成设备的不兼容,当前的ide(集成开发环境)编辑器支持将css(层叠样式表)中的px自动编译成rem或vw,但是不支持将标签内的像素单位(px)转换成rem或vw。
因此,现有技术还有待于改进和发展。
发明内容
鉴于上述现有技术的不足,本发明的目的在于提供一种webpack标签尺寸样式转换方法及装置,旨在解决设备兼容性的问题。
本发明的技术方案如下:
一种webpack标签尺寸样式转换方法,其中,包括步骤:
A.设置webpack的基本配置;
B.对文件目录进行递归查询,判断文件类型;
C.根据文件类型,匹配文件对应的标签,并将文件对应的标签匹配像素属性;
D.获取像素属性的像素单位信息,并将像素单位转换为对应设备能够兼容的单位,并替换掉所述像素单位。
所述的webpack标签尺寸样式转换方法,其中,所述步骤A中,webpack的基本配置包括基础路径、输出路径、编译优化、当前环境。
所述的webpack标签尺寸样式转换方法,其中,所述步骤A包括:
安装css处理器,通过所述css处理器可讲less格式的层叠样式表文件输出为css格式,即当前环境能够兼容并编译的格式。
所述的webpack标签尺寸样式转换方法,其中,所述步骤B包括:
设置文件后缀正则表达式,用于区分文件后缀名;
设置标签正则表达式,用于匹配文件中的标签,只转换该标签中的像素单位;
对文件目录进行递归查询;
根据文件的后缀名,判断文件类型,并将文件类型通过css处理器转换为可编译的类型。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。