推荐工具
PX 转 EM 工具
像素(PX)和EM单位相互转换工具,支持自定义上下文字体大小
PX → EM
转换公式
PX → EM: em = px ÷ base
EM → PX: px = em × base
当前基准值: 16px
常用转换对照表
| PX | EM (12px) | EM (16px) | EM (20px) | EM (24px) |
|---|---|---|---|---|
| 12px | 1.0000em | 0.7500em | 0.6000em | 0.5000em |
| 14px | 1.1667em | 0.8750em | 0.7000em | 0.5833em |
| 16px | 1.3333em | 1.0000em | 0.8000em | 0.6667em |
| 18px | 1.5000em | 1.1250em | 0.9000em | 0.7500em |
| 20px | 1.6667em | 1.2500em | 1.0000em | 0.8333em |
| 24px | 2.0000em | 1.5000em | 1.2000em | 1.0000em |
| 28px | 2.3333em | 1.7500em | 1.4000em | 1.1667em |
| 32px | 2.6667em | 2.0000em | 1.6000em | 1.3333em |
| 36px | 3.0000em | 2.2500em | 1.8000em | 1.5000em |
| 48px | 4.0000em | 3.0000em | 2.4000em | 2.0000em |
工具简介:PX 转 EM 工具
PX 转 EM 工具用于在像素(PX)和 EM 单位之间进行转换,可自定义上下文字体大小,适合组件化布局和响应式排版。
常见应用场景
- PX 与 EM 之间的格式迁移与对接
- 将 PX 数据用于 EM 生态或代码生成
- 调试与验证转换是否符合规范
什么是 PX 与 EM 转换?
PX 是固定像素单位,EM 则相对当前字体大小(上下文)。将 PX 转为 EM 可以让字号与布局随父级字体缩放,更适合响应式与组件化设计。
如何使用
- 选择转换方向(PX → EM 或 EM → PX)。
- 设置上下文字体大小(base)。
- 输入数值,立即得到结果。
功能特点
- 支持 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 位小数,视觉上更稳定。