DevKit源码

CSS 单位换算

px / rem / em 互转,根字号与父字号分别可设。

⌘⏎ 换算
根字号
px
父字号
px
小数位
小数处理
零值单位
目标单位
未执行根 16px · 父 20px小数位 2去掉多余零
输入 · CSS 值逐行
CSS 值文本
字符 59字节 59行 4
批量结果 · 4 行根 16px · 父 20px复制不含表头与单位说明
原值px(根字号 16px)remem(父字号 20px)
16px16px1rem0.8em
32px32px2rem1.6em
1.5rem24px1.5rem1.2em
0.5em10px0.63rem0.5em
基准:根字号 16px · 父字号 20px已换算 4跳过 0待输入
批量换算与勾选

rem 与 em 的参照不同

  • rem 依据根字号(html font-size,这里 16px),em 依据父元素字号(这里 20px),两者不能互相替换。
  • 仅转换勾选的行,未勾选的行保持原值并在结果中显示 ;勾选状态由你控制,修改输入不会自动改变已勾选的行。
  • 小数位(2 / 3 / 4)与小数处理(去掉多余零 / 固定位数)直接决定结果;零值单位可选 00px
  • 「复制结果 / 下载 .css」按当前「目标单位」重写勾选行;「复制表格 / 复制已勾选」只复制数值,不含表头与单位说明。

失败处理

根字号与父字号都必须是大于 0 的数字(允许小数,例如 15.5)。缺少有效基准时不执行换算,也不会输出部分结果;输入内容与参数会保留,修正后可直接重新换算。

什么时候用「CSS 单位换算」

设计稿标注的是 px,而项目用 rem,需要把一批尺寸换算过去。

使用要点

  • px / rem / em 互转,根字号与父字号分别可设。
  • 一次可换算多个数值,不用一个个按计算器。
  • em 依赖父元素字号,换算前先确认上下文。

相关工具

CSS 单位换算与其他 44 个工具一样,全部计算都在你的浏览器里完成:输入、密钥与文件不会发送到服务器,页面首次加载后可离线使用。