16px
⇄
1rem = 16px
当根字体大小为 16px 时
常用换算对照表
| PX | REM | PX | REM |
|---|
工具介绍
了解REM与PX转换工具的功能特点和使用方法
什么是REM与PX转换工具？
REM与PX转换工具是一款在线单位换算工具，用于CSS像素（px）与相对单位rem之间的相互转换。rem是CSS3中引入的一个相对长度单位，它是相对于根元素（html元素）的字体大小来计算的。在响应式设计和移动端适配中，rem单位被广泛使用，本工具可以帮助前端开发人员快速进行单位换算，提高开发效率。
功能特点
- 双向转换：支持px转rem和rem转px双向转换，一键切换转换方向。
- 自定义基准：可自由设置根字体大小（html font-size），默认值为16px。
- 实时计算：输入数值后立即显示转换结果，无需点击转换按钮。
- 对照表格：提供常用数值的换算对照表，方便快速查阅。
- 滑块调节：支持滑块调节基准字体大小，直观便捷。
什么是REM？
rem（font size of the root element）是指相对于根元素的字体大小的单位。它与em单位类似，但em是相对于父元素的字体大小，而rem是相对于根元素（html元素）的字体大小。rem的优点在于：
1. 只需要设置根元素的字体大小，就可以统一调整整个页面的尺寸；
2. 不会像em那样出现层级嵌套导致的字体大小累加问题；
3. 在移动端响应式设计中，可以通过修改根字体大小来适配不同屏幕尺寸；
4. 所有现代浏览器都支持rem单位，兼容性良好。
如何使用？
1. 设置根字体大小（html font-size），默认值为16px，可以通过滑块或输入框调整；
2. 在PX输入框中输入像素值，会自动计算出对应的REM值；
3. 也可以在REM输入框中输入rem值，自动计算出对应的PX值；
4. 点击"交换单位"按钮可以快速互换输入和输出单位；
5. 点击"复制结果"按钮可以将转换结果复制到剪贴板；
6. 下方的对照表可以快速查阅常用数值的换算结果。
常见问题
关于REM与PX转换工具的常见问题解答
rem和em有什么区别？
rem和em都是相对长度单位，但它们的参照对象不同：em是相对于当前元素或父元素的字体大小，如果元素自身设置了字体大小则相对于自身，否则继承父元素；而rem是相对于根元素（html元素）的字体大小，始终以html的font-size为基准。rem的优势在于不会出现em那样的层级累加问题，计算更加直观。
为什么默认根字体大小是16px？
16px是大多数浏览器的默认字体大小，也是W3C推荐的默认值。在Chrome、Firefox、Safari等主流浏览器中，默认的字体大小都是16px。当然，您可以根据项目需要调整这个值，很多移动端适配方案会将根字体大小设置为100px或其他值，方便计算。
rem单位支持哪些浏览器？
rem单位是CSS3引入的，所有现代浏览器都支持，包括Chrome、Firefox、Safari、Edge、Opera等。对于较老的浏览器，IE9及以上版本支持rem单位。如果需要兼容IE8及以下版本，可以使用polyfill方案，或者同时提供px和rem两种写法。
移动端适配为什么要用rem？
在移动端开发中，设备屏幕尺寸和分辨率各不相同，使用固定的px单位难以实现完美的适配。使用rem单位可以通过动态修改根元素的字体大小，让页面元素按比例缩放，从而在不同尺寸的屏幕上呈现出一致的视觉效果。常见的方案有flexible.js、postcss-pxtorem等，它们的核心原理都是基于rem单位的动态计算。
根字体大小设置为多少比较合适？
这取决于您的项目需求和开发习惯。如果是PC端项目，建议使用默认的16px，这是浏览器的默认值。如果是移动端项目，可以根据设计稿来设置：常见的设置有100px（方便计算，1rem=100px）、37.5px（基于iPhone6的375px设计稿）等。关键是要在整个团队中保持统一，避免混淆。