CSS 单位换算器

CSS 单位换算器（CSS Unit Converter）

在 px、rem、em、pt、pc、in、cm、mm、vw、vh、% 之间互转的网页工具。纯 HTML/CSS/JavaScript 单文件实现，零依赖、零后端，所有换算在浏览器本地完成。

功能特性

• 11 种单位互转：px、rem、em、pt、pc、in、cm、mm、vw、vh、%

• 基准可调：根字号（供 rem）、父字号（供 em 与 %）、视口宽高（供 vw / vh）均可修改，结果实时重算

• 绝对单位：按 CSS 参考像素精确换算，1in = 96px = 72pt = 6pc = 2.54cm = 25.4mm

• 源单位高亮：结果中高亮当前源单位，便于对照

• 单值与整表复制：每个单位可单独复制，也可一键复制全部结果

• 容错：支持负数与小数，非法输入给出明确提示

换算关系

工作原理

输入数值与源单位
  → 归一到像素：px = value × pxPerUnit(源单位, 基准)
  → 派生目标：result = px ÷ pxPerUnit(目标单位, 基准)
  → 结果保留至多 6 位小数并去除多余尾零

所有单位的换算系数由一个 pxPerUnit(unit, cfg) 统一给出，保证互转一致。

使用场景

• 响应式开发：把设计稿的 px 换算成 rem，或将 vw 换算成 px 核对实际尺寸

• 字体排印：在 em / rem / % 之间对照换算

• 多屏适配：修改视口基准，预估不同屏宽下 vw / vh 的实际像素值

• 离线使用：无需安装任何依赖，浏览器打开即用

快速开始

无需安装与构建，直接用浏览器打开 index.html 即可使用，或在任意静态服务器下访问：

python3 -m http.server 8030
# 访问 http://localhost:8030/index.html

技术栈

• HTML5 + CSS3 + 原生 JavaScript（零第三方依赖）

• 统一归一换算模型（pxPerUnit）

• 剪贴板：navigator.clipboard.writeText