📐
免费像素与 REM 转换器
在 px、rem、em、pt、vw、vh 和 % 之间转换，支持可配置的基础字体大小。包含常用像素尺寸参考表。
加载后可离线使用
1rem
上下文（影响 rem/em/vw/vh/%）
16 px 的所有换算
最接近的 Tailwind 令牌（在 16px 根处）
常用像素尺寸 → rem（基准 16px）
转换粘贴的 CSS
常见用途
- Web开发的PX到REM将像素值转换为rem单位以实现可扩展、可访问的CSS。设置基本字体大小并立即查看所有等效值。
- 响应式设计的CSS单位在px、vw、vh和%之间转换以构建能正确响应不同屏幕大小和方向的布局。
- 将设计规格转换为CSS单位将Figma或Sketch像素值转换为rem/em单位，实现干净、可扩展的CSS实现。
- Tailwind CSS单位参考了解Tailwind CSS尺寸类如何映射到像素和rem值以实现精确实现。
- 为打印样式表转换CSS单位在px、pt和rem之间转换以进行打印媒体查询和PDF输出CSS。
工作原理
所有换算都在你的浏览器中使用零依赖的手写算术引擎运行。工具在七种 CSS 单位（px、rem、em、pt、vw、vh 和 %）之间换算，所有计算都以像素为统一基准，根据你设置的根字号、父元素字号或视口尺寸进行简单的除法或乘法。
- 1设置上下文数值换算之前，你需要设置让相对 CSS 单位有意义的四个数值：根字号（默认 16px，即浏览器默认值）、父元素字号（用于 em 和 % 换算）以及视口宽度和高度（用于 vw 和 vh）。这些与浏览器在运行时解析 CSS 所用的值相同。
- 2以像素作为通用中间值换算器先调用 toPixels() 将输入规范化为原始像素数——例如 1.5rem 变为 1.5 × baseFontPx，50vw 变为 0.5 × vpWidth。然后 fromPixels() 将该像素数除以目标单位的相应系数。换算表中同时显示全部七种单位。
- 3查找最接近的 Tailwind 值换算后，工具计算 rem 值并扫描两个硬编码的查找表——Tailwind 的十三个字号值（text-xs 到 text-9xl）及其间距刻度——按绝对差找到最接近的匹配。= 号表示该值与某个值完全一致；≈ 表示最接近的近似值。
- 4通过正则批量改写 CSS粘贴 CSS 面板接受原始 CSS 文本并应用正则替换：在 px→rem 模式中，匹配每个 px 值，并将数字部分替换为 value/baseFontPx + rem；rem→px 模式则反向进行。会显示替换次数，方便你核实改写了多少个值。