不喜欢广告? 无广告 今天

像素/rem/em转换器(CSS单位)

开发人员文本
广告 移除?

预设

设置

用于 EM 计算 (EM 相对于父级元素字号)

视口单位

视口 vw vh
360px (移动设备)
768px (平板电脑)
1280px (笔记本电脑)
1920px (台式机)

参考表

像素 REM EM PT
8px
10px
12px
14px
16px
18px
20px
24px
32px
48px
64px
广告 移除?

指导

像素 / REM / EM 转换器

实时在 CSS 单位之间转换:像素 (px)、根 em (rem) 和 em。调整基础字号,所有值将实时更新。非常适合前端开发人员将设计规范转换为 CSS。

如何使用

在任意一个单位字段(px、rem 或 em)中输入值,其他两个字段将即时更新。使用滑块或输入字段调整基础字号(默认为 16px)以匹配您项目的根字号。下方的参考表一目了然地显示了常见的转换。

特征

  • 双向转换 – 编辑 px、rem 或 em,所有其他值即时更新
  • 可调基础字号 – 滑块和输入同步,默认为 16px
  • 参考表 – 常用字号根据您的基础字号自动计算
  • 实时更新 – 节流输入以获得流畅性能
  • 客户端仅支持 – 不会将任何数据发送到任何服务器

广告 移除?

常问问题

  1. rem 和 em 在 CSS 中有什么区别?

    rem (root em) 相对于根元素字号(html),在整个页面上保持一致。em 相对于父级元素的字号,这可能在嵌套元素中累积。通常首选 rem 以获得布局一致性。

  2. 为什么默认情况下 1rem 等于 16px?

    浏览器默认的根字号为 16px,除非被覆盖。因此 1rem = 16px,0.5rem = 8px,1.5rem = 24px。如果您设置 html { font-size: 62.5%; },则 1rem = 10px,便于计算。

  3. 什么时候应该使用 px 而不是 rem 或 em?

    对不应随用户字体偏好而缩放的值(如边框、阴影或媒体查询断点)使用 px。使用 rem 用于字号和间距,以便您的布局能够尊重用户的可访问性设置。使用 em 用于组件相对大小。

  4. 浏览器缩放如何影响 CSS 单位?

    浏览器缩放会按比例缩放所有 CSS 单位,包括 px。这与操作系统级别的文本缩放不同。但是,如果用户更改其浏览器的默认字号,rem 和 em 值会调整,而 px 值则不会——这使得 rem/em 更有利于可访问性。

想要享受无广告的体验吗? 立即无广告

安装我们的扩展

将 IO 工具添加到您最喜欢的浏览器,以便即时访问和更快地搜索

添加 Chrome 扩展程序 添加 边缘延伸 添加 Firefox 扩展 添加 Opera 扩展

记分板已到达!

记分板 是一种有趣的跟踪您游戏的方式,所有数据都存储在您的浏览器中。更多功能即将推出!

广告 移除?
广告 移除?
广告 移除?

新闻角 包含技术亮点

参与其中

帮助我们继续提供有价值的免费工具

给我买杯咖啡
广告 移除?