css 长度单位转换器

滞涩枚举
• 阅读 2120

由来

这是一个重构工具,试过有项目,本来用着 px 写单位,后来使用 rem 做适配,就要变更单位,有一些项目本来是按照 640 做设计稿宽度,后来做小程序了,做好的页面要变成基于 750 宽度的设计稿,相对的写好的绝对长度就要变。比如 640 里面的 320像素,就要换成 750 标准里面的 375 像素了。
于是我就搞出来这个工具,输入已经写好的 css,配置好相应的转换步骤,即可输出新长度标准的 css 了。
github 地址 下面附上 README

css 长度单位转换器

对传入字符串进行正则替换,可以按顺序执行多个步骤,不 star 一个吗?
(https://github.com/LiangWei88...

单位转换

  • 一个单位按比例转换为另一个单位,如 16px, 转换为 rem 按照 1 像素等于 0.01 rem 的比值,保留 2 位小数,得出 0.16rem

等比数字转换

  • 同一个单位相互转换,如 640px 设计稿中的 16px 转换为 750px 设计稿中的数字,保留 0 位小数,得出 19px

注意

  • 满足下列几种格式,16px; 或 16px 16px 或 16px}
  • 即单位后必须带空格或分号或花括号
/*错误写法*/
.test {
    width:16px
}

/*正确写法, 三种都可以*/
.test {
    width:16px;
    margin: 16px 22px;
    font-size: 32px}

使用方法

直接使用

  • npm i --save design-size-convertor
  • node node_modules/design-size-convertor/index.js

快捷脚本

npm i --save design-size-convertor 安装完,
可以把 node node_modules/design-size-convertor/index.js 放入到你的 package.json 的 script 里面

"script" : {
    "dsc": "node node_modules/design-size-convertor/index.js"
} 

然后使用 npm run dsc

下载压缩包

到 github 上面直接下载
然后运行 node index.js

直接使用,不 star 一个吗?

github page

TODO

  1. 做成 webpack loader
点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Karen110 Karen110
3年前
一篇文章带你了解JavaScript日期
日期对象允许您使用日期(年、月、日、小时、分钟、秒和毫秒)。一、JavaScript的日期格式一个JavaScript日期可以写为一个字符串:ThuFeb02201909:59:51GMT0800(中国标准时间)或者是一个数字:1486000791164写数字的日期,指定的毫秒数自1970年1月1日00:00:00到现在。1\.显示日期使用
美凌格栋栋酱 美凌格栋栋酱
6个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Jacquelyn38 Jacquelyn38
4年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Easter79 Easter79
3年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
HTML5常见的取值与单位
HTML5常见的取值与单位长度单位包括相对长度单位包括:em,ex,ch,rem,vw,vh,vmax,vmin绝对长度单位包括:cm,mm,q,in,pt,pc,pxch:数字“0”的宽度em:相对于当前对象内文本的字体尺寸。如当前
Stella981 Stella981
3年前
JavaScript常用函数
1\.字符串长度截取functioncutstr(str,len){vartemp,icount0,patrn/^\x00\xff/,strre"";for(vari
Python进阶者 Python进阶者
1年前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
滞涩枚举
滞涩枚举
Lv1
梦里相思,故国王孙路。
文章
3
粉丝
0
获赞
0