px、rem、em 通用的 CSS 单位转换器
CSS 单位转换器在你输入的瞬间，就用你设定的基准字号把一个 px 转 rem（或 rem 转 px、px 转 em）的数值换算成其他每种单位。输入一个数字，选好原始单位，px、rem、em 三个结果即可并排查看。
它专为正在把布局从固定像素迁移到相对单位的前端开发者和设计师打造。把基准字号设成你的 html { font-size }，换算就贴合真实项目，而不是死板地假设为 16px。
如何换算 CSS 单位
设置基准字号
基准字号默认为 16px，即浏览器的标准默认值。把它改成项目根元素的 html { font-size }，rem 和 em 结果才会准确。
选择输入单位
点击 px、rem 或 em 标签，告诉转换器你的数值是哪种单位。
输入数值
输入任意数字，即可看到 px、rem、em 实时更新。点一下 16px 或 1.5rem 这样的示例按钮，就能立刻载入常用值。
复制结果
点击任意一行旁的复制按钮，即可连同单位后缀一起复制数值，例如 1.5rem，可直接粘贴到 CSS 中。
只需要单一方向？打开专注的换算对，例如 PX 转 REM、REM 转 PX 或 PX 转 EM。两个输入框都可编辑，任意一个都能输入，而互换按钮会在保留数值的同时切换到相反的换算对。
功能特点
实时换算
数值随输入即刻更新，在 px、rem、em 之间换算，无需点击任何按钮。
可自定义基准字号
把根字号设在 1 到 100px 之间（默认 16px），让 rem 和 em 贴合你的真实项目。
可调小数精度
在 1 到 6 位小数之间选择，控制换算结果的精确程度。
双向换算对
在专注的 PX 转 REM、REM 转 PX、PX 转 EM 换算对中，在任意输入框输入，另一个都会随之联动。
一键反转方向
点一下即可反转换算对，并把当前数值带到相反的方向。
快速对照表
可展开的表格列出 8px 到 96px 共 18 个常用像素值，并附上对应的 rem 和 em 值。
一键复制
复制任意结果时自动带上单位后缀，例如 1.5rem，可直接粘贴到样式表中。
快捷示例按钮
12px、16px、24px、1.5rem 等常用尺寸的预设按钮，点一下即可载入数值。
单位说明卡片
简短的卡片讲解 px、rem、em 各是什么，以及何时该用哪种单位。
设置保存并共享
你的基准字号和小数精度通过 localStorage 保存，并在主页面和每个换算对之间同步。
常见问题
px 怎么转换成 rem？
用像素值除以基准（根）字号：rem = px ÷ base。在默认 16px 基准下，24px 等于 1.5rem。转换器会替你做这一步除法，并在你输入的瞬间更新，省去手动套公式。
rem 转 px 的公式是什么？
用 rem 值乘以基准字号：px = rem × base。在 16px 基准下，1.5rem 等于 24px。如果项目用的是不同的根字号，改一下基准字号字段，结果就会随之更新。
rem 总是以 16px 为基准吗？
16px 只是默认值。rem 相对于根 <html> 字号，多数浏览器把它设为 16px，但你可以在 CSS 中修改。这正是转换器提供基准字号字段的原因——把它设成项目实际的根字号，结果才准确。
em 和 rem 有什么区别？
rem 始终相对于根元素的字号，因此在整个页面中保持一致。em 相对于父元素的字号，这意味着元素嵌套时 em 值会层层叠加——1.2em 套在 1.2em 里，最终等于根字号的 1.44 倍。
什么时候该用 rem 而不是 px？
排版、间距和希望随用户偏好缩放的布局尺寸用 rem——调大了浏览器默认字号的读者会从基于 rem 的设计中受益。边框、盒阴影这类该保持固定的部分则继续用 px。
为什么 PX 转 EM 换算对显示的是"父元素字号"？
因为 em 相对的是父元素的字号，而非根元素。这时标签会切换成"父元素字号"，提醒你参照尺寸取决于元素在 DOM 中的位置，而不是根 <html> 字号。
我的设置会在多次访问之间保存吗？
会的。你的基准字号和小数精度保存在浏览器的 localStorage 中，并在主转换器和每个专注换算对之间共享。它们在关闭浏览器后依然保留，且不会上传到服务器。
还没有评论，快来发表第一条！