不喜欢广告？ 去 无广告 今天
像素/rem/em转换器（CSS单位）
开发人员文本
广告 · 消除？
广告 · 消除？
指导
像素 / REM / EM 转换器
实时在 CSS 单位之间转换：像素 (px)、根 em (rem) 和 em。调整基础字号，所有值将实时更新。非常适合前端开发人员将设计规范转换为 CSS。
如何使用
在任意一个单位字段（px、rem 或 em）中输入值，其他两个字段将即时更新。使用滑块或输入字段调整基础字号（默认为 16px）以匹配您项目的根字号。下方的参考表一目了然地显示了常见的转换。
特征
- 双向转换 – 编辑 px、rem 或 em，所有其他值即时更新
- 可调基础字号 – 滑块和输入同步，默认为 16px
- 参考表 – 常用字号根据您的基础字号自动计算
- 实时更新 – 节流输入以获得流畅性能
- 仅客户端 – 不会将任何数据发送到任何服务器
广告 · 消除？
常问问题
-
rem 和 em 在 CSS 中有什么区别？
rem (root em) 相对于根元素字号（html），在整个页面上保持一致。em 相对于父级元素的字号，这可能在嵌套元素中累积。通常首选 rem 以获得布局一致性。
-
为什么默认情况下 1rem 等于 16px？
浏览器默认的根字号为 16px，除非被覆盖。因此 1rem = 16px，0.5rem = 8px，1.5rem = 24px。如果您设置 html { font-size: 62.5%; }，则 1rem = 10px，便于计算。
-
什么时候应该使用 px 而不是 rem 或 em？
对不应随用户字体偏好而缩放的值（如边框、阴影或媒体查询断点）使用 px。使用 rem 用于字号和间距，以便您的布局能够尊重用户的可访问性设置。使用 em 用于组件相对大小。
-
浏览器缩放如何影响 CSS 单位？
浏览器缩放会按比例缩放所有 CSS 单位，包括 px。这与操作系统级别的文本缩放不同。但是，如果用户更改其浏览器的默认字号，rem 和 em 值会调整，而 px 值则不会——这使得 rem/em 更有利于可访问性。
