跳到主内容
CrateX.app 徽标

CrateX.app

CSS 单位转换

CSS 单位转换

CSS 单位转换支持 px、em、rem、%、vw、vh、pt 等单位换算，并提供断点、字号、视口与 DPI 上下文配置，适合响应式布局与前端还原。

像素
px
点击切换单位

长度单位

字体/排版

视口单位

比例/百分比

相对根字号
rem
点击切换单位

长度单位

字体/排版

视口单位

比例/百分比
CSS 单位转换

快速开始

1
输入数值并选择单位：如 16 + px，或 1 + rem
2
先选来源单位并输入数值，再选目标单位；可用“交换”快速对调。
3
移动端：用抽屉右上角箭头在来源/目标间切换。
4
选择 rem/em/%/vw/vh 等时“设置”可用；绝对单位会禁用。
5
查看结果：其余单位会即时换算并显示，可一键复制
6
断点：切换移动/平板/桌面等预设视口，验证不同屏幕下的换算

常见使用场景

用途

响应式布局、设计到前端协作、跨密度/打印对照、样式规范统一

补充场景

px 转 em、em 转 px、vw 转 px 也可在同一流程中完成，便于在复制、导出或交付前快速核对结果。

使用建议

设定基准：将根字号设为 16px 常见，便于 rem ↔ px 心算
文本建议 rem：便于全局缩放与无障碍；局部组件可用 em 做相对缩放
布局建议 vw/vh/vmin/vmax：结合断点与最小/最大值约束，避免极端拉伸
小数与取整：输出保留合理精度，避免过长小数影响可读性

转换参数与上下文

REM 基准（Root Font Size）：决定 rem 与 px 的换算比例。Web 常用 16px，便于心算（1rem≈16px）。当设计稿不是以 16px 为基准时，可临时调整以快速估算 rem 数值。
EM 基准（Parent Font Size）：决定 em 与 %（当参照为“字体大小”）的换算。适合组件局部缩放：修改父字号即可整体按比例变化。
% 参照：选择“字体大小 / 宽度 / 高度”作为 % 的参考量。用于估算时：布局相关请选择“宽度/高度”；排版相关（如 line-height）选择“字体大小”。
断点预设：移动 / 平板 / 桌面 / 大屏会同步设置视口宽高，便于在不同屏宽下快速验证换算。此处仅用于估算，不等同于运行时的媒体查询。
视口宽高：用于 vw/vh/vmin/vmax 与 %（参照为宽/高）的换算。实际设备上还会受地址栏/安全区/滚动条影响，少量偏差属正常现象。
DPI（每英寸像素）：用于物理单位 pt/pc/in/cm/mm/q ↔ px 的换算。Web 默认 96 DPI；打印/高密设备请按实际设备设定，否则仅作近似估算。
建议：1）常用 16px 与 96 DPI 作为基准；2）布局百分比估算时配合断点切换验证；3）这些参数用于“设计/沟通的快速换算”，并不替代浏览器在真实 DOM/CSS 上的最终计算。

限制与兼容性

% 的参照因属性而异（如 width/height/line-height 规则不同），本工具按常见约定估算
ex/ch 基于字体字形度量，跨字体/浏览器表现可能不同
视口单位会受滚动条/地址栏/安全区域影响，实际值可能与设计稿略有出入
物理单位到 px 的换算随 DPI 改变，打印/高密设备需以实测为准

隐私与安全

所有处理都在浏览器本地完成，当前内容可随时替换、清空并重新处理。

常见问题

4

可继续使用这些相关工具，完成后续步骤。