什么是 CSS 单位转换？

CSS 单位转换器是一种将长度值在不同 CSS 测量体系之间相互转换的工具。CSS 定义了十余种长度单位，分为两类：绝对单位（如 px、pt、cm、in）映射到固定的物理尺寸；相对单位（如 rem、em、vw、vh 和 %）则依赖上下文，例如字体大小或视口尺寸。

浏览器在渲染过程中会将所有 CSS 长度解析为像素。当你写 1.5rem 时，浏览器将 1.5 乘以根字体大小（通常为 16px），得到 24px。当你写 50vw 时，浏览器取当前视口宽度的一半。理解这些换算关系是构建能够跨设备自适应、并尊重用户偏好（例如浏览器中设置的自定义字体大小）的布局的必要基础。

W3C 的 CSS 值与单位模块第四级规范定义了所有绝对单位之间的精确换算比例：1in = 96px = 72pt = 2.54cm = 25.4mm。相对单位没有固定的换算比例，因为它们依赖于运行时的上下文。免费的 CSS 单位转换器可让你在给定具体根字体大小和视口尺寸的情况下即时计算这些换算关系，无需编写任何代码。

为什么使用 CSS 单位转换器？

手动换算 CSS 单位需要记住比例、打开计算器并反复核验结果。本工具在浏览器中完成换算，零摩擦，即用即得。

⚡

即时转换

输入数值，选择来源单位，即可同时看到全部 10 种 CSS 单位的换算结果。无需分别计算 px 转 rem、px 转 vw 或 px 转 pt。

🔒

数据完全私密

所有换算均在浏览器本地运行，不会将任何数值发送至服务器，也不会记录或存储。关闭标签页，数据即消失。

🎯

匹配你的实际环境

可设置根字体大小、视口宽度、视口高度和父级字体大小。转换器使用这些参数为 rem、em、vw、vh 和 % 单位生成精确结果。

📏

覆盖所有 CSS 长度单位

支持 px、rem、em、vw、vh、%、pt、cm、mm 和 in。无论你在处理屏幕布局、打印样式表还是响应式排版，所有单位均已涵盖。

CSS 单位转换器使用场景

前端开发

将设计稿的像素值转换为 rem，用于组件库。当 Figma 原型中指定 24px 的间距时，将其转换为 1.5rem，使布局能够随用户的字体大小偏好自动缩放。

后端 / 全栈工程

生成以 pt 或 cm 指定尺寸的 PDF 或邮件模板。将 CSS 像素值转换为适合打印的点数，用于 Puppeteer 或 wkhtmltopdf 等工具的服务端渲染。

DevOps / CI 流水线

验证设计系统的间距标记在各构建步骤中使用了一致的单位。快速确认 16px 的基础字体大小能在生成的 CSS 中产生预期的 rem 值。

质量保证 / 视觉测试

在跨浏览器测试中验证计算样式。当 Chrome DevTools 显示计算值为 14.4px 时，将其转换为 rem，确认是否与样式表中预期的 0.9rem 一致。

数据可视化

将 SVG 或 canvas 元素的尺寸设置为相对于视口的比例。将固定像素的图表宽度转换为 vw 单位，使可视化内容在不同显示器上占据一致的屏幕比例。

学习 CSS

通过实验不同的基础字体大小，理解 rem、em 和 px 之间的关系。将根字体大小从 16px 改为 18px，观察每个 rem 值如何随之变化。

CSS 长度单位参考

CSS 定义了 10 种常用长度单位。绝对单位具有固定的像素换算比例。相对单位依赖上下文：rem 相对于根元素字体大小，em 相对于父级字体大小，vw 和 vh 相对于浏览器视口。

单位	名称	默认大小	相对于
px	Pixel	1px	Fixed; 1px = 1/96 of 1in on screens
rem	Root em	16px (default)	Relative to <html> font-size
em	Em	Inherited	Relative to parent element font-size
vw	Viewport width	1% of viewport	Relative to browser window width
vh	Viewport height	1% of viewport	Relative to browser window height
%	Percentage	Varies	Relative to parent property value
pt	Point	1.333px	Print unit; 1pt = 1/72 of 1in
cm	Centimeter	37.795px	Physical unit; 1cm = 96px / 2.54
mm	Millimeter	3.7795px	Physical unit; 1mm = 1cm / 10
in	Inch	96px	Physical unit; 1in = 96px (CSS spec)

绝对单位与相对单位

选择绝对单位还是相对单位，会影响布局在不同屏幕和用户设置下的响应方式。两类单位各有不同的权衡取舍。

绝对单位（px、pt、cm、mm、in）

绝对单位无论上下文如何，都会产生相同的物理尺寸。对于边框、阴影和不应缩放的元素，使用 px。打印样式表使用 pt。CSS 规范规定 1in = 96px，但实际物理尺寸因显示器 DPI 而异。

相对单位（rem、em、vw、vh、%）

相对单位随参考上下文缩放。字体大小和间距使用 rem，以尊重用户偏好。组件内部缩放（内边距相对于元素自身字体大小）使用 em。视口填充布局（如 hero 区块）使用 vw/vh。

常用 px 转 rem 换算表

下表假设根字体大小为 16px（浏览器默认值）。如果你的项目使用不同的基础值，则将像素值除以你的基础值即可得到 rem 等效值。

px	rem	pt	典型用途
10	0.625	7.5	Small caption text
12	0.75	9	Body text (compact)
14	0.875	10.5	Default body text
16	1	12	Root font-size (browser default)
18	1.125	13.5	Large body text
20	1.25	15	H4 heading
24	1.5	18	H3 heading
32	2	24	H2 heading
48	3	36	H1 heading
64	4	48	Display / hero text

代码示例

以下示例展示如何在 JavaScript、Python、CSS 自定义属性和 Sass 中以编程方式转换 CSS 单位。

JavaScript

// px to rem (given root font-size of 16px)
const pxToRem = (px, base = 16) => px / base
pxToRem(24)  // → 1.5

// rem to px
const remToPx = (rem, base = 16) => rem * base
remToPx(1.5) // → 24

// px to vw (given viewport width of 1440px)
const pxToVw = (px, viewport = 1440) => (px / viewport) * 100
pxToVw(360)  // → 25

// Dynamic calculation using getComputedStyle
const rootFontSize = parseFloat(
  getComputedStyle(document.documentElement).fontSize
) // → 16 on most browsers

Python

# CSS unit converter functions

def px_to_rem(px: float, base: float = 16) -> float:
    return px / base

def rem_to_px(rem: float, base: float = 16) -> float:
    return rem * base

def px_to_vw(px: float, viewport: float = 1440) -> float:
    return (px / viewport) * 100

def px_to_pt(px: float) -> float:
    return px * 72 / 96

print(px_to_rem(24))     # → 1.5
print(rem_to_px(2.5))    # → 40.0
print(px_to_vw(720))     # → 50.0
print(px_to_pt(16))      # → 12.0

CSS (calc & custom properties)

/* Define a base scale using rem */
:root {
  --base: 16px;       /* root font-size */
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem;  /* 8px */
  --space-4: 1rem;    /* 16px */
  --space-8: 2rem;    /* 32px */
}

/* Fluid typography: scales between 1rem (16px) and 2.5rem (40px) */
h1 {
  font-size: clamp(1rem, 2.5vw + 0.5rem, 2.5rem);
}

/* Viewport-relative hero height */
.hero {
  height: calc(100vh - 4rem); /* full viewport minus 64px header */
}

/* Percentage-based grid */
.sidebar { width: 25%; }     /* 360px on 1440px screen */
.content { width: 75%; }     /* 1080px on 1440px screen */

SCSS (mixin)

// Reusable px-to-rem function in Sass
@use "sass:math";

$base-font-size: 16px !default;

@function rem($px) {
  @return math.div($px, $base-font-size) * 1rem;
}

// Usage
.card {
  padding: rem(24px);       // → 1.5rem
  margin-bottom: rem(32px); // → 2rem
  border-radius: rem(8px);  // → 0.5rem
  font-size: rem(14px);     // → 0.875rem
}

常见问题

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

所有主流浏览器（Chrome、Firefox、Safari、Edge）的根字体大小默认为 16px。这意味着除非用户或样式表覆盖了 html 元素的 font-size，否则 1rem = 16px。部分用户会在浏览器设置中增大字体大小以提升可访问性，这也是文本首选 rem 而非 px 的原因。

如何将 px 转换为 rem？

将像素值除以根字体大小。在默认 16px 基础下：24px / 16 = 1.5rem。如果项目将 html { font-size: 10px } 作为常用重置，则 24px / 10 = 2.4rem。公式始终是：rem = px / 根字体大小。

rem 和 em 有什么区别？

rem 相对于根元素（html 标签）的字体大小，而 em 相对于当前元素父级的字体大小。这意味着 rem 在整个页面中产生一致的尺寸，而 em 在嵌套时会叠加。一个 2em 元素嵌套在 2em 的父级中，实际尺寸会变为根字体大小的 4 倍。全局间距和字体大小使用 rem；当你希望尺寸随组件自身文字缩放时，使用 em。

什么时候应该使用 vw 或 vh 单位？

对于需要随浏览器窗口宽度缩放的元素（如全宽 hero 区块或流式排版中的 clamp），使用 vw。对于全屏区块或视口高度布局，使用 vh。在移动端浏览器上使用 vh 时需谨慎，因为地址栏的出现会改变视口高度；较新的 dvh（动态视口高度）单位解决了这一问题。

同一属性中可以混用不同的 CSS 单位吗？

可以。CSS 的 calc() 函数允许在单个表达式中组合任意单位。例如，width: calc(100vw - 2rem) 从整个视口宽度中减去 32px（在默认基础下）。你还可以在 clamp() 中混用单位：font-size: clamp(1rem, 2vw + 0.5rem, 2.5rem) 可创建在 16px 到 40px 之间流畅缩放的排版。

在 CSS 中，1pt 等于多少像素？

在 CSS 中，1pt = 1/72 英寸，而 1 英寸 = 96px，因此 1pt = 96/72 ≈ 1.333px。这一比例在 CSS 规范中固定不变，与屏幕 DPI 无关。pt 主要用于打印样式表和 PDF 生成。屏幕设计建议使用 px 或 rem。

62.5% 字体大小重置仍然是推荐做法吗？

将 html { font-size: 62.5% } 可使 1rem = 10px，简化心算（24px = 2.4rem）。然而，这要求你在 body 元素上显式设置 font-size，并可能与假设默认 16px 基础的第三方组件产生冲突。现代做法更倾向于保留 16px 默认值，转而使用 Sass 函数或 PostCSS 插件处理换算。

CSS单位转换器