PX 转 EM 工具

像素(PX)和EM单位相互转换工具,支持自定义上下文字体大小

PX → EM

转换公式

PX → EM: em = px ÷ base

EM → PX: px = em × base

当前基准值: 16px

常用转换对照表

PXEM (12px)EM (16px)EM (20px)EM (24px)
12px1.0000em 0.7500em 0.6000em 0.5000em
14px1.1667em 0.8750em 0.7000em 0.5833em
16px1.3333em 1.0000em 0.8000em 0.6667em
18px1.5000em 1.1250em 0.9000em 0.7500em
20px1.6667em 1.2500em 1.0000em 0.8333em
24px2.0000em 1.5000em 1.2000em 1.0000em
28px2.3333em 1.7500em 1.4000em 1.1667em
32px2.6667em 2.0000em 1.6000em 1.3333em
36px3.0000em 2.2500em 1.8000em 1.5000em
48px4.0000em 3.0000em 2.4000em 2.0000em

工具简介:PX 转 EM 工具

PX 转 EM 工具用于在像素(PX)和 EM 单位之间进行转换,可自定义上下文字体大小,适合组件化布局和响应式排版。

常见应用场景

  • PX 与 EM 之间的格式迁移与对接
  • 将 PX 数据用于 EM 生态或代码生成
  • 调试与验证转换是否符合规范

什么是 PX 与 EM 转换?

PX 是固定像素单位,EM 则相对当前字体大小(上下文)。将 PX 转为 EM 可以让字号与布局随父级字体缩放,更适合响应式与组件化设计。

如何使用

  1. 选择转换方向(PX → EM 或 EM → PX)。
  2. 设置上下文字体大小(base)。
  3. 输入数值,立即得到结果。

功能特点

  • 支持 PX 和 EM 的双向转换
  • 上下文字体大小可选预设或手动输入
  • 提供常用转换对照表

转换公式

  • PX → EM: em = px ÷ base
  • EM → PX: px = em × base

示例

  • 16px,上下文 16px = 1em
  • 24px,上下文 16px = 1.5em
  • 18px,上下文 12px = 1.5em

❓ 常见问题 FAQ

Q1:base 应该填多少?
A:通常填父级元素的 font-size,常见为 16px。

Q2:什么时候用 EM 更合适?
A:需要随容器字号缩放的排版场景,如组件库、可访问性字体放大等。

Q3:结果有小数怎么办?
A:EM 支持小数,建议保留 2-3 位小数,视觉上更稳定。