CSS 单位转换器是什么？
CSS 单位转换器帮助您即时转换最常见的 CSS 长度单位：px、rem 和 em。无论您是在构建响应式网站还是从基于像素的单位迁移到相对单位，此工具都能轻松完成计算。
为什么要转换 CSS 单位？
现代网页开发倾向于使用相对单位（如 rem 和 em）而非固定像素。相对单位能适应用户偏好和屏幕尺寸，改善 可访问性 和 响应式设计。在单位之间转换可确保您的设计保持一致，同时保持灵活性。
理解这些单位
px（像素）
rem（根 EM）
<html> 标签）。理想用于整个页面的一致缩放。em（EM）
如何使用 CSS 单位转换器
快速转换（主页面）
设置基础字体大小
默认为 16px（标准浏览器默认值）。更改为与您项目的根字体大小匹配。
选择输入单位
点击单位标签中的 px、rem 或 em。
输入数值
输入任何数字，所有转换结果将即时更新。
复制结果
点击任何结果旁的复制按钮，将值与其单位复制（例如"1.5rem"）。
专项转换（子应用）
选择转换对
从子应用标签中选择 PX → REM、REM → PX 或 PX → EM。
在任一字段中输入数值
两个字段都是输入框，您可以在"源"或"目标"字段中输入。
交换方向
点击交换按钮反转转换方向（导航到相反的子应用）。
自定义设置
基础字体大小
影响 rem 计算。设置为您项目的 html { font-size: ... } 值。
父元素字体大小
显示用于 em 转换。设置为您 CSS 上下文中父元素的字体大小。
小数位数
控制输出精度，范围从 1 到 6 位小数。
功能
核心转换
- 实时结果 — 输入时值即时更新，无需点击按钮。
- 三种 CSS 单位 — 在任何方向转换 px、rem 和 em。
- 双向输入 — 在子应用中，在任一字段输入，另一字段自动更新。
- 可自定义的基础大小 — 设置根或父元素字体大小，进行精确的项目特定转换。
生产力
一键复制
复制任何结果及其单位后缀（例如"1.5rem"），可直接粘贴到您的 CSS 中。
快速示例
点击常见值如 12px、16px 或 1.5rem，即时查看结果。
参考表
可展开的表格，显示 18 个常见像素值（8px–96px）的转换。
交换转换
在子应用间快速反转方向，同时保持当前数值。
设置与持久化
- 可调节精度 — 为输出值选择 1 到 6 位小数。
- 保存的偏好设置 — 基础字体大小和小数设置通过 localStorage 在会话间持久保存。
- 共享设置 — 设置在主转换器和所有子应用间同步。
隐私
常见问题
默认基础字体大小是多少？
大多数浏览器使用 16px 作为根 <html> 元素的默认字体大小。此工具默认为 16px，但您可以更改为与您项目的设置匹配。
rem 和 em 有什么区别？
rem 始终相对于根元素的字体大小，在整个页面中保持一致。em 相对于父元素的字体大小，这意味着当元素嵌套时 em 值会复合（例如，1.2em 内的 1.2em 等于根大小的 1.44 倍）。
根相对
- 始终相对于
<html> - 在页面间一致
- 无复合
- 最适合全局缩放
父相对
- 相对于父元素
- 取决于上下文
- 嵌套时值会复合
- 最适合组件级尺寸
何时应使用 rem 而非 px？
当您希望设计随用户偏好缩放时，对排版、间距和布局尺寸使用 rem。增加浏览器默认字体大小的用户将受益于基于 rem 的设计。对于应保持固定的元素（如边框和盒阴影），保留 px。
| 用例 | 推荐单位 | 原因 |
|---|---|---|
| 排版 | rem | 随用户偏好缩放 |
| 间距/边距 | rem | 保持比例布局 |
| 边框 | px | 应保持固定 |
| 盒阴影 | px | 需要精确视觉控制 |
| 组件尺寸 | em | 相对于组件上下文 |
为什么 PX 转 EM 转换器显示"父元素字体大小"而非"基础字体大小"？
因为 em 相对于 父元素的 字体大小，而非根元素。标签更改为"父元素字体大小"是为了提醒您参考大小取决于元素在 DOM 树中的上下文。
我的设置会被保存吗？
是的。您的基础字体大小和小数精度保存在浏览器的 localStorage 中，并在主转换器和所有子应用间共享。即使关闭浏览器后也会保持。
我的数据会发送到任何服务器吗？
不会。所有转换在您的浏览器中本地计算。无数据传输或存储到任何服务器。
- 100% 客户端处理
- 无服务器通信
- 无数据收集或跟踪
- 设置仅存储在您的浏览器中
还没有评论，快来发表第一条！