CSS单位换算工具（px / rem / em）
换算结果
px16px
rem1rem
em1em
pt12pt
%100%
相关外部网站
部分链接为联盟营销链接。
相关工具
颜色格式转换将颜色转换为 HEX/RGB/HSL/HSV/CMYK，并复制可直接粘贴的 CSS、SwiftUI、Android、Flutter 代码。全部在浏览器内完成。Base64 编码/解码文本与 Base64 互转，中文表情不乱码（UTF-8），支持 URL 安全 base64，图片转 data URL，全部在浏览器内处理不上传。Flexbox 演练场切换 flex-direction、justify-content、align-items、wrap 和 gap，实时预览并复制 CSS。快速学习和搭建 flex 布局。在浏览器内完成。CSS clamp() 生成器根据最小/最大尺寸与视口范围生成用于响应式字体和间距的流体 CSS clamp() 值，并实时预览。在浏览器内完成。
在 px、rem、em、pt 和百分比之间相互换算 CSS 长度单位。由于 rem 取决于根字体大小，em 和百分比取决于父（基准）字体大小，因此两者均可自定义——默认均为浏览器标准的 16px。输入数值并选择单位，即可同时看到所有换算结果。一切在浏览器中完成，无需上传。
使用方法
- 输入数值并选择源单位。
- 设置根字体大小，以及 em/% 的基准大小。
- 查看或复制各单位的换算结果。
工作原理
所有数值首先转换为像素：rem 乘以根字体大小，em 乘以基准（父）字体大小，pt 使用 CSS 的 96/72 比例，百分比则是基准大小乘以数值再除以 100。再从像素转换回各单位。例如根字体为 16px 时，1.5rem 等于 24px，12pt 等于 16px。
功能特点
一次显示所有单位
一个数值同时显示 px、rem、em、pt 和 % 的换算结果。
自定义根字体与基准字体
自由设置 rem、em 和 % 所依赖的根字体大小和父字体大小。
复制任意单位
一键复制 CSS 中所需的精确数值。
隐私保护，即时换算
所有换算在浏览器中完成，不会上传任何数据。
使用场景
响应式设计
将像素稿中的数值转换为可缩放的 rem 单位。
无障碍访问
使用 rem 让文字尊重用户的字体大小设置。
组件开发
根据组件字体大小计算相对的 em 值。
打印样式
在打印 CSS 中相互转换 pt 和 px。
注意事项
- rem 相对于根（html）字体大小。
- em 和百分比相对于父（基准）字体大小。
- pt 使用标准 96/72 比例（1pt ≈ 1.333px）。
- 所有计算在设备上完成，不会上传任何数据。
常见问题
- rem 和 em 有什么区别？
- rem 相对于根字体大小，em 相对于父元素的字体大小。可以在此分别设置两种大小。
- 为什么默认值是 16px？
- 大多数浏览器的默认根字体大小为 16px，因此除非修改，1rem 等于 16px。
- pt 是如何换算的？
- 使用 CSS 的 96/72 比例，因此 1pt 约为 1.333px，12pt 等于 16px。
- 百分比是相对于什么换算的？
- 百分比与 em 一样，相对于基准（父）字体大小——100% 等于基准大小。
- 数据会被上传吗？
- 不会。所有换算均在浏览器中完成，数据不会离开您的设备。