CSS 单位转换器 — 在 px、rem、em、pt 之间转换
在 px、rem、em、pt 和 % 之间转换 CSS 长度单位。支持自定义根字号，完全在浏览器中运行。无上传、无限制。
CSS Unit Converter
Convert CSS units between px, rem, em, and pt. Uses the standard 16px = 1rem base. Works entirely in your browser.
CSS 单位是一小组名字，映射到一组混乱的多重含义。规范定义了大约 30 个长度单位；实际上，Web 开发者只用其中几个：px 用于绝对大小、rem 和 em 用于排版、% 用于弹性布局、vw/vh 用于视口相对尺寸。前三种是本工具涵盖的，它们之间的转换就是乘以一个常数：根字号。一个本质上是 value * 16 的运算居然需要一个工具，原因在于根字号是可配置的，搞错常数就会产生代码评审看起来对、到用户那边就坏的值。
单位转换中「不那么显然」的一点是 CSS 里的 px 与硬件显示器的 px 不同。CSS 把 1px 永远定义为 1/96 英寸 —— 所以 96 CSS 像素就是 1 英寸，与设备的物理像素密度无关。在 Retina 显示器上，浏览器把 1 CSS 像素映射到 4 个硬件像素（2×2）以得到锐利渲染。在 4K 显示器上，映射是 1 CSS 像素对应 9 个硬件像素（3×3）。单位转换器完全工作在 CSS 像素里，所以输出在代码里无论什么设备都正确 —— 变的是渲染尺寸，不是值。对打印样式表，同样有 96 CSS 像素对应 1 英寸的规则，所以 1in = 96px，1pt = 1.333px（印刷点的定义）。
最终的交接：如果目标是为新样式表选正确的单位，用 rem 用于排版和间距（让设计随用户偏好缩放），px 用于边框和阴影（不让它们缩放），% 或 vw 用于布局（让设计自适应视口）。如果目标是把遗留样式表从 px 改写成 rem，根字号是你唯一需要设的数 —— 通常是未改浏览器默认时的 16px，或者是设计系统已经标准化的任何值。这里的转换器能在任意根字号下给出任意 px 输入对应的精确 rem 值。
使用方法
输入值和源单位
键入数字并选择源单位（px、rem、em、pt、%）。自定义根字号字段可编辑；默认 16px 与浏览器默认一致。大多数计算器默认按 16px 计算，除非另行指定。
查看转换结果
输出面板显示其他所有支持单位的值。计算随键入实时更新，一个输入值同时产生五个输出。
复制你需要的那一行
点击输出面板中的任意行，把该行复制到剪贴板，格式化为可以直接粘贴的 CSS 声明（`font-size: 1.25rem;`）。适合手动编辑样式表。
常见问题
为什么 px 值与浏览器显示的不一样？
浏览器默认 16px 根字号，但用户可以改（浏览器缩放、操作系统显示设置、可访问性偏好）。转换器使用可配置的根字号 —— 要获得精确结果，请把它设为你的实际根字号，而不是默认 16px。
rem 与 em 有什么区别？
rem 相对于根字号（`html { font-size: 16px; }` —— 1rem = 16px）。em 相对于父元素的字号，每嵌套一层都可能变。在 `font-size: 20px` 的父元素里 1em 是 20px，而不是 16px。
能在绝对单位和相对单位之间转换吗？
可以 —— px、pt 和 in（英寸）是绝对单位。rem、em 和 % 是相对单位。绝对与绝对之间转换是精确的（1in = 96px = 72pt，按 CSS 规范），相对与绝对之间转换需要根字号（1rem = 根字号的 px 值）。
为什么 % 值是近似的？
50% 的含义取决于属性 —— 对 `width` 而言，50% 是父元素宽度的一半；对 `font-size`，50% 是父元素字号的一半；对 `margin`，50% 是包含块宽度的一半。除非选择其他属性，转换器假设是 font-size 百分比。
现代 CSS 应该用 px 还是 rem？
rem 是排版和间距的现代推荐，因为它尊重用户的字号偏好。px 适合边框、阴影和其他非文字尺寸。选择是项目约定，不是正确性问题。
限制说明
- em 依赖父元素em 相对于父元素的字号，每一层可能不同。转换器假设单一的根字号 —— 对嵌套的 em 值，沿 DOM 向上走，每一层应用一次转换。
- 不转换 vw 和 vh视口单位（vw、vh、vmin、vmax）相对于视口尺寸，不是根字号。本工具无法转换。视口相对布局请用别的计算器。
- % 不区分属性% 转换假设值应用于 font-size。对 width、padding 或 margin 百分比，结果不同。工具在 % 行标注了它的假设，所以输出的适用范围很明确。
平台说明
- macOS
- Safari、Chrome 和 Firefox 在 macOS 上默认都是 16px 根字号。转换器与之匹配。要测试用户缩放后的输出，把根字号设为用户的实际缩放级别再跑。
- Windows
- Windows 上的 Edge 和 Chrome 默认 16px。Internet Explorer 11 对某些属性用了不同的默认值；如果在维护遗留代码，在 IE11 渲染模式下测试，并把根字号设成匹配的数值。
- Linux
- Linux 浏览器默认与 macOS 和 Windows 一致，都是 16px。高 DPI 显示器上，实际渲染的像素大小经过硬件缩放，但 CSS px 值不变 —— 转换器工作在 CSS 值上，不是渲染像素。
- Web
- 完全在客户端运行。页面加载后离线可用。根字号从输入字段读取，不会从浏览器读取 —— 设为样式表的实际值，才能得到精确的转换。