CSS 单位转换器
在 CSS 单位之间转换：px、rem、em、vw、vh 和 %。配置基础字体大小和视口尺寸以获得精确结果。
设置
所有等效值
| 单位 | 数值 |
|---|---|
| px | 16px |
| rem | 1rem |
| em | 1em |
| vw | 0.833333vw |
| vh | 1.48148vh |
| % | 100% |
= 16 px
快速参考（px → rem）
| px | rem | em | vw | vh |
|---|---|---|---|---|
| 8px | 0.5rem | 0.5em | 0.416667vw | 0.740741vh |
| 12px | 0.75rem | 0.75em | 0.625vw | 1.11111vh |
| 14px | 0.875rem | 0.875em | 0.729167vw | 1.2963vh |
| 16px | 1rem | 1em | 0.833333vw | 1.48148vh |
| 18px | 1.125rem | 1.125em | 0.9375vw | 1.66667vh |
| 20px | 1.25rem | 1.25em | 1.04167vw | 1.85185vh |
| 24px | 1.5rem | 1.5em | 1.25vw | 2.22222vh |
| 32px | 2rem | 2em | 1.66667vw | 2.96296vh |
| 48px | 3rem | 3em | 2.5vw | 4.44444vh |
| 64px | 4rem | 4em | 3.33333vw | 5.92593vh |
如何转换 CSS 单位
- 设置基础字体大小（默认：16px）和视口尺寸
- 输入数值并选择单位（px、rem、em、vw、vh 或 %）
- 查看其他 CSS 单位的所有等效值
- 查阅快速参考表获取常见的 px 转 rem 换算
使用场景
- •响应式设计：将固定像素值转换为流体 rem 或 vw 单位
- •设计交付：将 Figma/Sketch 中的像素规格转换为 CSS rem 值
- •无障碍访问：使用 rem 单位以尊重用户的字体大小偏好设置
- •布局：为全出血区块计算相对于视口的尺寸
公式
CSS 单位转换取决于基础字体大小和视口尺寸。rem = px / baseFontSize。vw = px / viewportWidth × 100。vh = px / viewportHeight × 100。
常见问题
rem 和 em 有什么区别？
rem 相对于根元素（html）的字体大小。em 相对于父元素的字体大小。在根级别，两者相同。
浏览器的默认字体大小是多少？
大多数浏览器默认为 16px。这意味着除非更改根字体大小，否则 1rem = 16px。
什么时候应该使用 vw/vh？
对于需要随浏览器窗口等比缩放的元素（如首屏大图或全屏背景），请使用 vw（视口宽度）和 vh（视口高度）。
如何将 px 转换为 rem？
将像素值除以基础字体大小。默认 16px 时：24px ÷ 16 = 1.5rem。
% 单位是相对于什么的？
% 单位在 CSS 中取决于上下文。对于 font-size，它相对于父元素的 font-size；对于 width，它相对于父元素的宽度。