📐 CSS 单位换算器 — px / rem / em / vw / vh / pt / % / ch 互转
输入根字号、父字号与视口尺寸，在任意单位填入一个数值即可实时换算出其余七种 CSS 单位的等价值； 附带 px⇄rem 速查表、clamp() 响应式字号生成器、单位说明与实时预览，复制即用。
① 基准设置
对应 :root / html 的 font-size，rem 以此为准。
em 与 % 以父元素字体大小为参照。
ch 为"0"字宽，依字体而变，0.5 为常见近似。
② 单位换算
| 单位 | 等价值 | 说明 |
|---|
实时预览（按换算得到的像素值渲染）：
Aa 永 0123 中文排版预览 — The quick brown fox jumps.
③ px ⇄ rem 速查表（基准 16px）
公式：rem = px ÷ 16。下方为 1~100px 对应 rem，可随时修改「基准设置」根字号后点击刷新。
| px | rem | px | rem | px | rem | px | rem |
|---|
④ clamp() 响应式字号生成器
生成的 CSS（点击复制）：
clamp(14px, calc(11.43px + 0.00298 * 100vw), 24px)
⑤ CSS 单位说明
px 像素
绝对长度单位，1px = 1/96 英寸，与设备像素密度无关，最直观可控。
rem 根字号
相对根元素(html) font-size，便于全局缩放与可访问性，推荐为主流单位。
em 父字号
相对父元素字体大小，多层嵌套会累积放大，慎用做字体。
pt 点
印刷单位，1pt = 1/72 英寸 = 1.3333px，常用于打印样式。
vw 视口宽
相对视口宽度 1vw = 视口宽 ÷ 100，做流体排版常用。
vh 视口高
相对视口高度 1vh = 视口高 ÷ 100，常用于全屏元素。
% 百分比
字体场景相对父元素字号；尺寸场景相对父容器对应尺寸。
ch 字宽
相对当前字体"0"字符宽，约 0.5em，适合控制文本列宽。
💡 换算要点
- rem 与根字号挂钩：根字号设为 10px 时，1rem = 10px，换算最方便（10px × 1.6 = 16px → 1.6rem）。
- em 会随层级复合放大：父 16px、子 1.5em、孙 1.5em，则孙实际为 16 × 1.5 × 1.5 = 36px。
- vw/vh 随视口实时变化，与设备/窗口大小相关，适合响应式布局；ch 依字体而变，本工具按 0.5×字号近似。
- clamp(最小, 理想, 最大) 可实现"随视口流动但不越界"的字号，是响应式排版的现代写法。
📘 使用说明
- 设置基准值：根字体大小（默认 16px）、父元素字号与视口宽高
- 在任意一个单位输入框中输入数值
- 其他所有单位的等价值会实时联动换算
- 使用 clamp() 生成器输入最小最大字号与视口范围，一键复制响应式 CSS
❓ 常见问题
Q: em 和 rem 到底有什么区别？
A: rem 的 r 代表 root，始终相对于根元素 html 的字体大小（默认 16px），无论嵌套多深都不变，因此可预测、易维护，是现在的主流选择。em 相对于当前元素的父元素字体大小，会层层继承并复合累积——如果父级设了 1.5em、子级又设 1.5em，子级实际是父级的 1.5 倍即根字号的 2.25 倍，嵌套多了很难心算。实践建议：字号、间距、圆角用 rem 保持全局一致；只有需要「随组件字号等比缩放」的场景（如按钮内边距跟随按钮字号）才用 em。
Q: 为什么 100vh 在手机上会出问题？
A: 因为移动端浏览器的地址栏和工具栏会随滚动动态收起/展开，而 vh 的计算基准是「视口高度」。iOS Safari 中 100vh 取的是地址栏收起时的最大高度，导致地址栏展开时页面底部被截断；Chrome Android 的行为又不同，滚动时会触发重排导致跳动。解决方案有三种：一是用新的动态视口单位 dvh（100dvh 会随地址栏实时变化）、svh（最小视口）、lvh（最大视口），现代浏览器已广泛支持；二是用 JS 监听 resize 把真实高度写入 CSS 变量；三是改用 height: 100% 配合 html,body{height:100%}。
Q: clamp() 怎么用来做响应式字号？
A: clamp(最小值, 首选值, 最大值) 会在首选值超出范围时自动钳制。做响应式字号时，首选值通常写成 「基准rem + 系数vw」的线性组合，比如 clamp(1rem, 0.5rem + 2vw, 2rem) 的含义是：字号随视口宽度线性增长，但不小于 16px 也不大于 32px。计算系数的方法是解一个二元一次方程：已知在视口 W₁ 时希望字号 F₁、视口 W₂ 时字号 F₂，则 vw 系数 = (F₂-F₁)/(W₂-W₁)×100，rem 基准 = F₁ - 系数×W₁/100，再除以 16 转成 rem。本工具的生成器会自动完成这个计算。
Q: 1pt 等于多少 px？打印时该用什么单位？
A: 在 CSS 中 1pt = 1/72 英寸，而 CSS 规定 1 英寸 = 96px，所以 1pt = 96/72 = 1.333px，反过来 1px = 0.75pt。打印样式表（@media print）中推荐使用 pt、cm、mm 这类绝对单位，因为它们对应真实的物理尺寸，打印结果可预测；正文常用 10-12pt。屏幕显示则应该用 px 或 rem，因为屏幕的物理像素密度差异很大，绝对单位在高分屏上会显示异常。切忌在屏幕样式中混用 pt。
