css中的单位换算_css 长度单位转换器

由来

这是一个重构工具，试过有项目，本来用着 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 一个吗？

TODO

做成 webpack loader

css中的单位换算_css 长度单位转换器相关推荐

css中的单位换算_CSS中各种长度单位总结
在前端开发工作过程中曾碰到这样一问题: .parent{ width:400px; height:300px; border:1px solid #ccc; } .child{ margin:10%; ...
css中的单位换算_css绝对长度单位主要有哪些？绝对长度单位之间如何换算？
本篇文章就给大家介绍css长度单位中绝对长度单位主要有哪些,它们之间是怎么换算的.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. css中的长度单位有很多,可谓五花八门,但基本上可分 ...
css中的单位换算_css大小单位px em rem的转换和详解
css大小单位px em rem的转换和详解 PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firef ...
css中的单位换算_CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport
1.PX(CSS pixels) 1.1 定义虚拟像素,可以理解为"直觉"像素,CSS和JS使用的抽象单位,浏览器内的一切长度都是以CSS像素为单位的,CSS像素的单位是px. ...
css中的单位换算_CSS单位px、em、rem及它们之间的换算关系
作者:WangMin 格言:努力做好自己喜欢的每一件事国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者的区别与优势是什么?接下来我们就来学习一下吧! 单位px.em.rem分 ...
css中的单位换算_金蝶ERP入门教程：动态换算率及辅助计量单位的应用
金蝶ERP入门教程:动态换算率及辅助计量单位的应用关注我,我将定期分享更多的ERP解决方案如果您喜欢且觉得内容有用,请点击分享转发如果你有什么关于ERP系统的问题和疑问,可私信联系我大家好,我 ...
css中的单位换算_关于网页中pt和px的单位换算！
关于pt和px的换算! px:说明: 相对长度单位.像素(Pixel). 像素是相对于显示器屏幕分辨率而言的. 譬如, WONDOWS的用户所使用的分辨率一般是96像素/英寸. 而MAC的用户所使用的 ...
css单位计算方法,CSS中的单位和百分比计算
CSS中的单位和百分比计算发布时间:2020-05-23 15:53:59 来源:亿速云阅读:217 作者:鸽子 CSS中的单位绝对单位 in-英寸: cm; mm; pt-磅相对单位 em- ...
计算机存储中的单位换算
计算机存储中的单位换算备战蓝桥杯的第1天,此题出现在第十一届蓝桥杯模拟赛中.(小白一枚,记录所有在做题过程中,出现的问题.) ## Byte.KB.MB.GB之间的转换* 这四个单位从小到大的排序是 ...

css中的单位换算_css 长度单位转换器

css中的单位换算_css 长度单位转换器相关推荐

最新文章

热门文章