CrateX.app 徽标

CrateX.app

CSS 单位转换

在 CSS 单位间转换，如 px、em、rem、%、vw、vh 等，支持响应式断点

使用说明

🚀 快速开始

  • 输入数值并选择单位：如 16 + px，或 1 + rem
  • 设置上下文：为相对单位配置根/父字号、视口尺寸与 DPI（影响 rem/em/vw/vh/pt/cm 等）
  • 查看结果：其余单位会即时换算并显示，可一键复制
  • 断点：切换移动/平板/桌面等预设视口，验证不同屏幕下的换算

📌 常见使用场景

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

🧭 使用建议

  • 设定基准：将根字号设为 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 改变，打印/高密设备需以实测为准

🔒 隐私与安全

  • 所有处理均在您的浏览器内完成，数据不会离开您的设备

❓ 常见问题

rem 与 em 有何区别？

rem 相对根字号，影响可控、便于全局放大；em 相对父元素字号，适合组件内部相对缩放

应该用 px 还是 rem？

布局与文字优先 rem 提升可访问性；图标/边框等细节允许使用 px 以保持像素对齐

为什么 vw/vh 在不同设备上数值不一致？

移动端地址栏/安全区与滚动条会改变视口度量，建议结合 clamp()/min()/max() 与断点做保护

如何将屏幕像素换算为印刷单位？

需要设定 DPI（如 96/72/300）；屏幕→印刷仅作估算，成品以打样与 ICC 流程为准

CSS Unit Converter - px em rem vw vh pt Calculator - CrateX.app