CSS 单位转换器
只需输入一次数值，即可按照你选择的根字体大小、父元素字体大小和视口，在每一种 CSS 长度单位——px、rem、em、pt、%、vw 和 vh——中查看。任意结果一键即可复制。
常用转换
转换为所有单位
rem、em 和 % 取决于字体大小；vw 和 vh 取决于视口。px 与 pt 之间为固定比例（1pt = 1.3333px）。如果你的默认值不同，请调整上方的上下文。
px 转 rem 参考表（根 = 16px）
| px | rem | pt |
|---|---|---|
| 8px | 0.5rem | 6pt |
| 10px | 0.625rem | 7.5pt |
| 12px | 0.75rem | 9pt |
| 14px | 0.875rem | 10.5pt |
| 16px | 1rem | 12pt |
| 18px | 1.125rem | 13.5pt |
| 20px | 1.25rem | 15pt |
| 24px | 1.5rem | 18pt |
| 32px | 2rem | 24pt |
| 48px | 3rem | 36pt |
在默认 16px 的根字体大小下，将像素除以 16 即得到 rem，乘以 0.75 即得到磅（pt）。
关于 CSS 单位转换器
CSS 提供了多种表示长度的方式，选对单位决定了布局是优雅地缩放还是直接崩坏。这个转换器可一次性将单个数值转换为所有常见的 CSS 单位。px（像素）是绝对参考单位——在 CSS 中，一个像素被定义为 1/96 英寸。rem 相对于文档的根字体大小（<html> 元素），默认值为 16px，因此 1rem = 16px，1.5rem = 24px；rem 是现代尺寸设置的标准，因为只改一个根值就能重新缩放整个页面，对无障碍访问极为有利。em 相对于当前元素的父字体大小，因此嵌套时会逐级累积。pt（磅）是打印单位，固定为 1pt = 1/72 英寸 = 1.3333px，因此 12pt = 16px。在 font-size 上下文中，% 等于父字体大小，因此 100% 与 1em 相同。vw 和 vh 分别是视口宽度和高度的 1%——非常适合流式的全屏布局。在高级面板中设置你自己的根字体大小、父字体大小和视口大小；合理的默认值（16/16/1920×1080）开箱即可覆盖日常的 px↔rem 场景。
如何转换 CSS 单位
- 1 输入一个数值，并选择它所使用的单位（例如 24 px 或 1.5 rem）。
- 2 在结果网格中查看其在其他每种单位中的等价值，点击任意卡片上的复制按钮，即可复制为可直接粘贴的形式（例如“1.5rem”）。
- 3 如果你的项目不使用 16px / 1920×1080 的默认值，请打开高级面板，更改根字体大小、父字体大小或视口大小。
转换公式
每次转换都通过像素并使用固定的 CSS 比例： rem = px ÷ 根字体大小（默认 16）——因此 px = rem × 16。 em = px ÷ 父字体大小（默认 16）。 pt = px × 0.75，因为 1px = 1/96 英寸而 1pt = 1/72 英寸，得出 1pt = 96/72 px = 1.3333px，1px = 0.75pt。 % = px ÷ 父字体大小 × 100（font-size 百分比，其中 100% = 父元素的字体大小，与 1em 相同）。 vw = px ÷ 视口宽度 × 100，vh = px ÷ 视口高度 × 100。 在默认值下，这意味着 16px = 1rem = 1em = 100% = 12pt = 0.8333vw = 1.4815vh。如果将根字体大小之类的基准设为 0，对应的单位将变为未定义，并显示为“—”而非无穷大。
常见问题
1rem 等于多少 px？
默认情况下 1rem = 16px，因为 rem 相对于根（<html>）字体大小，而浏览器开箱即将其设为 16px。因此 1.5rem = 24px，2rem = 32px。如果你更改根字体大小——例如改为 10px 以简化计算——那么 1rem 就等于该值（16px 会变成 1.6rem）。在高级面板中设置你自己的根字体大小，转换器会立即重新计算。
px 转 rem 的公式是什么？
rem = px ÷ 根字体大小，反过来 px = rem × 根字体大小。在默认的 16px 根值下，这意味着将像素值除以 16 即可得到 rem：24px ÷ 16 = 1.5rem，10px ÷ 16 = 0.625rem。在字体大小和间距方面，rem 比 px 更受青睐，因为它尊重用户浏览器的字体大小设置，更利于无障碍访问。
默认的根字体大小是多少？
所有主流浏览器的默认根字体大小都是 16px，应用于 <html> 元素。它是 rem 的基准，因此除非你（或某个样式表）覆盖它，否则 1rem = 16px。本转换器对根字体大小和父字体大小都默认使用 16px；你可以在高级面板中更改其中任意一个，以匹配你自己的项目。
px 和 pt 有什么区别？
px（像素）是屏幕的标准单位，在 CSS 中被定义为 1/96 英寸。pt（磅）是传统的打印/排版单位，等于 1/72 英寸。因此比例是固定的：1pt = 96/72 px ≈ 1.3333px，1px = 0.75pt。所以 12pt = 16px，这正是 12pt 打印文档与 16px 屏幕标题看起来大小相同的原因。网页请使用 px（或 rem），将 pt 留给打印样式表。
相关工具
继续在 UnitConv 上探索。用颜色转换器在 HEX、RGB 和 HSL 之间转换颜色，生成 CSS 渐变，检查 WCAG 对比度，计算宽高比，并在主单位转换器中探索网页之外的长度单位。