CSS单位转换器 — px, rem, em, pt, % 在线工具

输入任意CSS值（px、rem、em、pt或%），立即查看其他所有单位的等效值。设置自定义基础字体大小（默认16px）以精确转换rem和em。所有计算实时更新，无需刷新页面。

数值

基础字体大小（px）

通常为16px（浏览器默认值）

rem1 rem

em1 em

pt12 pt

%100 %

基础：16px。对于rem/em，1单位 = 根级别16px。

工作原理

CSS单位对响应式设计的重要性

CSS提供两大类长度单位：绝对单位（px、pt、cm、mm）和相对单位（rem、em、%、vw、vh）。绝对单位无论上下文如何都有固定的物理尺寸；相对单位则相对于某个参照物进行缩放——根字体大小、父元素字体大小或视口尺寸。选择合适的单位类型决定了布局能否优雅地适应不同屏幕尺寸、用户字体偏好和缩放级别。

像素（px）依然是最常见的CSS单位，因为其可预测且精确，但它不尊重用户的浏览器字体大小设置。将默认字体大小增大到20px以满足无障碍需求的用户会发现px文本保持不变，而rem文本则会相应放大。这就是为什么WCAG 2.1成功标准1.4.4（调整文字大小）使用rem等相对单位设置字体大小最容易满足的原因。

px vs rem vs em：各自的使用场景

rem（根em）相对于根元素的字体大小——在所有浏览器中默认为16px。由于rem锚定在一个固定的参考点（<html>元素），避免了em的复合效应。使用rem设置字体大小、组件间距，以及任何应随用户字体偏好缩放的值。典型公式：rem = px ÷ base，如24px ÷ 16 = 1.5rem。

em相对于当前元素的字体大小，而该大小本身可能以em设置——形成复合链。在`font-size: 1.2em`的父元素内的子元素设置`font-size: 1.2em`，结果是根字体大小的1.44倍（1.2×1.2）。这使em适合用于应随局部字体大小缩放的间距（组件内的padding和margin），但全局布局难以预测。pt（磅）主要用于打印设计：1pt = 1/72英寸，72pt = 1英寸 ≈ 屏幕上96px。

选择基础字体大小与设计系统的配合

大多数浏览器根字体大小默认为16px，这就是为什么默认转换器设置中1rem = 16px。部分开发者设置`html { font-size: 62.5%; }`使1rem = 10px，简化心算（24px = 2.4rem而非1.5rem）。这个技巧存在争议，因为需要在所有地方重置字体大小，且可能与无障碍偏好冲突。

现代设计系统（Material Design、Apple HIG、Tailwind CSS）对间距和排版使用模块化比例——通常是4px或8px的倍数。在这些单位中工作并转换为rem，可确保不同上下文中视觉节奏的一致性。Tailwind的默认比例例如使用4px = 1单位，因此值4（16px）等于1rem。如有疑问，将基础保持在16px，使用本转换器获取精确的rem值，无需心算。

常见问题

›如何将px转换为rem？

用像素值除以根字体大小。默认16px基础：rem = px ÷ 16。因此24px = 1.5rem，32px = 2rem，48px = 3rem。如果根字体大小是10px（来自`html { font-size: 62.5%; }`），则rem = px ÷ 10。

›浏览器默认字体大小是多少？

所有主流浏览器的根字体大小默认为16px，除非用户更改了偏好设置。这意味着在默认配置中1rem = 16px。部分用户为了无障碍会增大此值——这是使用rem而非px设置文本的关键原因。

›rem和em有什么区别？

rem始终相对于根元素（<html>）字体大小，因此可预测。em相对于当前元素的字体大小，可能通过继承而变化。全局值（正文字体大小、页面布局）使用rem，应随局部上下文缩放的值（相对于元素自身字体大小的padding）使用em。

›1rem等于多少像素？

默认情况下1rem = 16px。设置`html { font-size: 20px }`后1rem = 20px。设置`html { font-size: 62.5% }`（相对于默认16px）后1rem = 10px。本转换器中的基础字段可让您更改假定的根字体大小。

›字体大小应该用rem还是px？

尽可能使用rem设置字体大小。基于rem的文本尊重用户的浏览器字体大小偏好，这对无障碍很重要。像素会忽略浏览器设置，这意味着需要更大文字的用户无法受益于缩放（浏览器缩放引入之前）。

›如何将px转换为pt？

1磅 = 1/72英寸 = 屏幕上1.333像素。转换公式：pt = px × 0.75。因此16px = 12pt。磅主要用于打印CSS和针对PDF或打印样式表等物理媒体时。

›CSS单位中的%表示什么？

CSS中的百分比取决于上下文。对于font-size，100% = 继承的字体大小（与1em相同）。对于width/height，100% = 包含块的大小。在本转换器中，我们将%视为基础字体大小的百分比，因此100% = 基础px，150% = 1.5×基础。

›什么是62.5%技巧？

设置`html { font-size: 62.5%; }`使1rem = 10px（因为默认16px的62.5% = 10px）。这简化了rem计算：24px变为2.4rem而非1.5rem。但这需要在整个CSS中重置字体大小，可能会破坏第三方组件。现代设计令牌和工具使这个技巧变得不那么必要。