将24 px换算为rem
- 数值
- 24
- 从
- 像素（px）
- 到
- rem（根元素字号）
- 根元素字号（rem）
- 16 px
- 转换后的数值
- 1.5 rem
- CSS写法
- 1.5rem
- 以像素表示
- 24 px
核验来源：示例核算： CSS Values 3 §6.1: 1rem = 根元素字号 (16 px 浏览器默认值); 24 / 16 = 1.5
CSS 单位换算器（px 换算为 rem、em、pt）
根据根元素字号、父元素字号和 DPI，将 px 换算为 rem、em、pt、派卡、英寸和 mm。CSS 规定 1 in = 96 px = 72 pt。
转换后的数值
rem
转换后的数值: 1.5 rem
- CSS写法
- 1.5rem
- 以像素表示
- 24px
根字号为16 px、每英寸96像素时，24px为1.5rem。
像素大小与字号比较
以各单位表示24px
| 单位 | 数值 | 定义 |
|---|---|---|
| 像素（px） | 24px | 1 px |
| 点（pt） | 18pt | 1 pt = 1/72 in |
| 派卡（pc） | 1.5pc | 1 pc = 12 pt = 1/6 in |
| 英寸 (in) | 0.25in | 1 in = DPI px |
| 厘米 (cm) | 0.635cm | 1 cm = 1/2.54 in |
| 毫米 (mm) | 6.35mm | 1 mm = 1/25.4 in |
| 四分之一毫米（Q） | 25.4Q | 1 Q = 0.25 mm |
| em（父元素字号） | 1.5em | 1 em = parent font size |
| rem（根元素字号） | 1.5rem | 1 rem = root font size |
| 父元素字号的百分比（%） | 150% | 100% = parent font size |
计算方法 S
每px的像素数
1 px
以像素计的数值
除以每rem的像素数
1 rem = root font size
关于CSS 单位换算器（px 换算为 rem、em、pt）
CSS长度均经像素换算。绝对单位固定：1 in = 2.54 cm = 96 px = 72 pt = 6 pc，1 Q为四分之一毫米。字体相对单位依赖页面：1 rem为根字号；设置font-size时1 em（或100%）为父字号。先转成像素，再除以目标单位的像素数。
前端开发者将设计px转成rem，使文字遵循用户浏览器字号设置：默认根字号16 px时，24 px为1.5 rem。印刷设计使用每英寸像素字段；300 DPI下10 mm标志需约118像素。 文字要随用户设置变化，根字号必须尊重该设置。
CSS英寸不一定等于屏幕上实测的英寸。CSS规定每英寸96 px，参考像素的视角约0.0213°。实现可以按物理测量或像素锚定绝对单位；设备映射、观看距离及打印缩放都会影响是否与尺子一致。
公式中xₛ、xₜ为源值和目标值，pₛ、pₜ为每源单位和目标单位的像素数；系数采用输入的字号和像素密度。
先指定字体参照大小
除数值与单位外，还要指定rem所用根元素字号，以及em和%所用父元素字号。根字号为 16 px 时，24 px = 1.5 rem；改为 20 px 时，24 px = 1.2 rem。同一px值换基准后，rem数值会变化。
| 数值 | 原单位 | 目标单位 | 计算条件 | 换算值 |
|---|---|---|---|---|
| 24 | px | rem | 根字号 16 px | 1.5 |
| 24 | px | rem | 根字号 20 px | 1.2 |
| 12 | pt | px | 96 像素/in | 16 |
| 1 | pc | pt | 96 像素/in | 12 |
| 100 | % | em | 父元素字号 16 px | 1 |
| 10 | mm | px | 300 像素/in | 118.110236 |
区分CSS像素与物理像素
CSS绝对长度关系为 1 in = 96 px = 72 pt。在本工具中把密度改为96以外的值，表示按该密度计数物理像素。例如 10 mm × 300 ÷ 25.4 ≈ 118.110236 px 是物理像素计算，不会改变浏览器CSS的固定比例。
em与%依赖属性上下文
本计算把em和%按设置font-size时的父元素字号处理。CSS并非所有属性的百分比都参考父元素字号，em在其他场合也可能参考当前元素。不能只凭缩放或设备像素比推定屏幕上的实际长度。定义见 W3C CSS Values and Units。
计算示例
将12 pt换算为px
- 数值
- 12
- 从
- 点（pt）
- 到
- 像素（px）
- 根元素字号（rem）
- 16 px
- 转换后的数值
- 16 px
- CSS写法
- 16px
核验来源：示例核算： CSS Values 3 §6.2: 1pt = 1/72 in, 1in = 96px; 12 × 96/72 = 16
以CSS像素表示1英寸
- 数值
- 1
- 从
- 英寸 (in)
- 到
- 像素（px）
- 根元素字号（rem）
- 16 px
- 转换后的数值
- 96 px
核验来源：示例核算： CSS Values 3 §6.2: 1in = 96px
将1.5 rem换算为px
- 数值
- 1.5
- 从
- rem（根元素字号）
- 到
- 像素（px）
- 根元素字号（rem）
- 16 px
- 转换后的数值
- 24 px
核验来源：示例核算： 1 rem = 根元素字号 (16 px); 1.5 × 16
常见问题
1 rem是多少像素？
默认16像素。一rem等于根html元素字号；主流浏览器默认16 px，除非用户更改或样式表设置html { font-size }。在此默认值下，html { font-size: 62.5% }使1 rem = 10 px。W3C CSS Values and Units定义rem，但16 px是浏览器默认值，不属于规范定义。
如何将px换算为pt？
像素乘0.75；磅转像素乘4/3（约1.333）。来自W3C CSS规则1 in = 96 px = 72 pt，故1 px = 72/96 pt。16 px正文为12 pt，文字处理器的11 pt约为14.67 px。
em和rem有什么区别？
rem始终参照根元素字号；em参照当前元素字号，但用于font-size本身时参照父元素。因此em会嵌套累乘：1.2em列表内再嵌1.2em列表为应用这两层之前基准字号的1.44倍；根字号16 px时，1.2rem无论多深都是19.2 px。
字号应使用px还是rem？
若文字应随用户浏览器字号设置变化，可用rem，并让根字号尊重该设置。页面缩放会同时放大px和rem；rem、em及百分比可通过根或父级上下文随字号偏好变化。WCAG 2.1成功准则1.4.4（AA）要求文字可放大至200%而不丢失内容或功能。px可通过浏览器缩放满足；根上下文允许时rem也能尊重字号偏好。
CSS英寸与实际英寸相同吗？
CSS英寸不一定等于屏幕上的实测英寸。CSS定义1 in = 96 px；W3C参考像素相当于从28 in距离观看96 DPI屏幕的一个像素，视角约0.0213°。设备映射与观看距离会变化，因此手机上96 px方框可能小于实际英寸。按实际尺寸打印时1 in对应25.4 mm，但打印缩放和校准仍影响物理输出。
关于此计算器
来源
已对照来源验证
此计算器包含 7 个已解示例，答案来自独立来源。这些示例会在测试套件中运行，你也可以在此运行验证。