移动端字体适配
设计师交付稿标注的是 16px，但开发时发现 iPhone SE 上 16px 偏大，需要转成 vw 单位让字体随屏幕等比缩放。手动算：16 ÷ 375（SE 设计稿宽度）× 100 ≈ 4.27vw，但每次换机型就得重算。本工具输入 px 值，选设计稿宽度，一键出 vw，省去反复按计算器的时间。
全 单 位 互 转任一可编辑 · 其余实时联动
常 用 对 照 表按当前 root 实时计算
流 式 响 应 · clamp()min / preferred / max 一键生成
最小值 min
px
理想值 preferred
px
最大值 max
px
单 位 定 义 与 场 景Definitions
换 算 基 准可调
根字号 root · rem
px
父字号 parent · em/%
px
视口宽 vw/vmin
px
视口高 vh/vmax
px
DPI cm/mm/in/pt
dpi
容器宽 %
px
基 准 预 设一键切换
就绪 · 改任一单位其余实时联动 · 全程浏览器本地处理
第一节
关于本工具
About调一个按钮，px 和 rem 对不上，整个页面布局就崩了。这个工具把 px、rem、em、vw、vh、pt 六种单位放在一起互转，输入一个值，其他单位实时换算出来。前端调样式、设计稿转代码、响应式断点换算都适用。换算全在浏览器本地进行，输入的数据不会离开设备。
使用场景
响应式间距统一
团队约定所有内外边距用 rem 单位，但设计师给的标注是 px。开发时要把 24px 转成 rem，得先知道根字号（默认 16px），24 ÷ 16 = 1.5rem。如果根字号改成 14px，又得重算。本工具直接输入 px 和根字号，即时显示 rem，避免因计算误差导致间距不统一。
打印样式单位转换
前端需要为页面写打印样式，设计稿标注字号是 12pt（印刷标准），但 CSS 里字号用 px 写。12pt 在 96dpi 屏幕下等于 16px，但不同打印机 dpi 不同，换算结果不一样。本工具支持 pt 与 px 互转，输入 pt 值，默认按 96dpi 换算，省去查转换表的步骤。
视口高度全屏布局
做一个手机端全屏引导页，要求首屏内容刚好占满一屏，不滚动。设计稿标注内容区域高度 812px（iPhone X 逻辑分辨率），但不同机型高度不同，写死 px 会溢出或留白。用本工具把 812px 转成 vh：812 ÷ 812 × 100 = 100vh，但实际要减去顶部安全区，需填入实际容器高度再换算。
旧项目统一改 rem
接手一个老项目，所有字号写死 px，现在要改 rem 以支持用户调整浏览器字号。页面有 20 多处字号，手动逐个算：14px ÷ 16 = 0.875rem，16px ÷ 16 = 1rem，18px ÷ 16 = 1.125rem。本工具支持批量输入多个 px 值，一次输出对应的 rem 列表，复制粘贴即可替换，避免逐个计算漏改。
第二节
使用指南
Getting Started使用步骤
- 1在「数值」输入框键入数字（如 16），下拉菜单选择原单位（px / rem / em / vw / vh / pt）
- 2在「目标单位」下拉菜单选择要转换的单位（可多选），右侧结果区即时显示换算值
- 3点击任一结果行的「复制」图标，该数值自动写入剪贴板，按钮短暂变为「已复制」
- 4展开底部「换算说明」面板，查看本次换算使用的基准值（如 1rem = 16px）与计算系数
输入输出示例
| 输入 | 输出 | 说明 |
|---|---|---|
| 16px → rem（基准 16px） | 1rem | 常规：px 与 rem 最常用换算，基准 16px 下 16px 恰好为 1rem，验证基础比例正确性 |
| 100vw → px（视口宽度 1920px） | 1920px | 常规：vw 与 px 换算，100vw 等于视口宽度，验证工具是否依赖用户输入的视口尺寸 |
| 0px → em（基准 16px） | 0em | 边界：零值转换，验证工具不会因除以基准值而报错或返回空串 |
| 1px → pt | 0.75pt | 边界：物理单位转换，1pt = 1/72 英寸，1px ≈ 0.75pt（96 DPI），验证工具是否使用标准 DPI |
| 999999px → rem（基准 16px） | 62499.9375rem | 边界：超大数值，验证工具是否出现精度丢失或科学计数法 |
| 16px → em（基准 16px，但父元素字体为 20px） | 0.8em | 易错：em 相对于父元素字体大小，与 rem 不同，用户常混淆，需明确工具是否允许设置父元素基准 |
| 50vh → px（视口高度 1080px） | 540px | 常规：vh 与 px 换算，验证视口高度输入对结果的影响 |
| -10px → rem | -0.625rem | 易错：负值转换，部分工具会报错或忽略负号，此示例验证工具是否正确处理负值 |
常见错误对照
1.rem 基准值混淆：默认 16px 但页面可能已改
✗ 错误
设计稿 32px → 直接写 2rem（假设 1rem=16px）✓ 修复
先确认根字号：document.documentElement.style.fontSize 或 computed style。若根字号为 20px，则 32px → 1.6remrem 相对于根元素 <html> 的 font-size，很多框架（如 rem.js）会动态修改根字号，默认 16px 假设不成立。
2.em 嵌套累积：父元素字号变化导致子元素 em 值非预期
✗ 错误
父 div font-size:20px，子元素 padding 写 1em（期望 20px，实际 20px 正确，但若父字号改则变）✓ 修复
子元素 padding: 1em 实际等于当前元素自身 font-size。若需固定相对父元素，用 % 或 remem 相对于当前元素自身 font-size，若当前元素未设则继承父级。嵌套时 em 会逐层累积，容易失控。
3.vw 与 100vw 滚动条宽度未考虑
✗ 错误
设置 width: 100vw 想让元素占满视口宽度✓ 修复
width: 100%（相对父容器）或 width: calc(100vw - scrollbar-width)。滚动条通常 17px100vw 包含滚动条宽度，导致元素超出视口出现水平滚动条。规范：vw 基于视口宽度，含滚动条。
4.pt 与 px 混淆：物理单位 vs 逻辑单位
✗ 错误
打印样式里写 font-size: 12pt，期望等于屏幕 12px✓ 修复
1pt = 1/72 英寸，屏幕 1px ≈ 0.75pt（96dpi）。打印时 12pt ≈ 16px。需精确对应时用 px 并设打印缩放pt 是物理长度单位（1/72 英寸），px 是 CSS 逻辑像素。屏幕 dpi 通常 96，打印 dpi 通常 300，换算系数不同。
5.vh 在移动端忽略地址栏高度
✗ 错误
设置 height: 100vh 期望全屏无滚动✓ 修复
用 100dvh（dynamic viewport height）或 min-height: 100vh + 额外 padding-bottom移动端浏览器 100vh 包含地址栏/工具栏高度，导致元素被遮挡。CSS 规范新增 dvh/svh/lvh 解决此问题。
6.em 用于 font-size 自身：循环引用
✗ 错误
div { font-size: 1.2em; } 期望相对于父元素 16px 得 19.2px✓ 修复
font-size 用 em 时，1.2em 相对于父元素字号，而非自身。若父未设则继承。更安全用 rem 或 pxfont-size 属性使用 em 时，计算值基于父元素字号，而非自身。这导致嵌套时 font-size 会逐层倍增。
7.vw/vh 与 calc 混用缺少空格
✗ 错误
width: calc(100vw-20px); 浏览器不识别✓ 修复
width: calc(100vw - 20px); 运算符两侧必须有空格CSS calc() 语法要求 + - 运算符两侧有空格，否则被解析为负数或无效表达式。乘除无此限制。
8.rem 在媒体查询中失效：媒体查询基于根字号
✗ 错误
@media (min-width: 48rem) { ... } 期望断点 768px✓ 修复
媒体查询中的 rem 始终基于浏览器默认字号（通常 16px），而非页面根字号。48rem = 768px 固定媒体查询 rem 使用初始根字号（用户代理默认），不受页面 <html> font-size 影响。这是规范设计。
第三节
工作原理
How It Works核心公式
1pt = 1/72 英寸，1px = 1/96 英寸 → pt = px × 72/96 = px × 0.75
变量说明
pt点，印刷排版单位，1pt=1/72英寸px像素，屏幕显示单位，1px=1/96英寸
示例
设计稿标注 16px 字体，换算为 pt：16 × 0.75 = 12pt。即 16px 对应 12pt，常用于印刷排版与屏幕显示对照。
输入 / 输出
中间处理
核心计算
第五节
常见问题
Q & A问我想把设计稿里的px转成rem，但不知道根字号是多少，怎么算？＋
答
本工具的 px→rem 换算默认按浏览器标准根字号 16px 计算（1rem = 16px）。如果你的项目设置了不同的根字号，比如 14px 或 10px，可以在输入框下方手动修改「根字号」参数。建议先确认项目 CSS 中 html 标签的 font-size 值，再填入对应数值，这样换算结果才准确。
问vw和vh算出来的值跟实际页面显示对不上，是不是工具不准？＋
答
vw 和 vh 是相对视口宽高的百分比单位，换算结果本身是准确的，但实际显示取决于浏览器视口尺寸。比如 50vw 在 1920px 宽屏幕上等于 960px，在 375px 手机上等于 187.5px。工具只做数学换算（目标值 = 视口尺寸 × 百分比），不模拟任何设备。如果页面显示有差异，请检查是否被父元素或 body 的 max-width 限制了实际宽度。
问pt和px有什么区别，我什么时候该用pt？＋
答
pt（点）是物理长度单位，1pt = 1/72 英寸；px 是屏幕像素单位，1px 约等于 1/96 英寸。pt 主要用于印刷品或打印样式表（@media print），比如 Word 文档或 PDF 排版；px 用于屏幕显示。如果你在做网页设计，建议统一用 px/rem/em；只有做打印样式或需要精确控制物理输出尺寸时，才需要用 pt。本工具支持 pt↔px 互转，方便你在两种场景间对照。
问em和rem到底怎么选，我每次换算都搞混？＋
答
区别在于参照对象：rem 始终参照根元素（html）字号，整个页面统一；em 参照当前元素的父元素字号，会层层嵌套累加。比如父元素 font-size: 20px，子元素设 2em 就是 40px，孙元素再设 2em 就是 80px。本工具 em 换算默认按父元素 16px 计算，你可以在输入框下方修改「父元素字号」参数。建议全局布局用 rem，组件内部间距用 em，避免嵌套混乱。
问这个换算工具需要上传我的设计稿文件吗？会不会泄露数据？＋
答
完全不需要上传任何文件。本工具是纯前端实现（FE），所有换算逻辑都在浏览器本地执行，不发送任何数据到服务器。你输入的数值、选择的单位只在你当前页面内存中计算，刷新或关闭页面后即消失。可以放心使用，适合处理敏感项目或离线环境。
问输入负值或小数会怎么样，支持百分比吗？＋
答
本工具接受正负小数（如 -1.5rem、0.25px），负数在 CSS 中常用于 margin 或偏移定位，工具会正常换算。百分比（%）不在此工具的换算范围内，因为百分比对应的是父容器具体属性而非固定单位，需要结合上下文才能计算。如果你需要百分比转 px，请先确定父容器实际宽度再手动计算。
问为什么我算出来的rem值在手机和电脑上显示大小不一样？＋
答
这是正常现象。rem 是相对单位，最终显示大小取决于设备浏览器的根字号。手机浏览器默认根字号通常是 16px，但有些国产浏览器或系统设置了字体缩放（比如系统大字模式），会导致根字号变大。建议在项目中用 JS 动态设置根字号（如根据屏幕宽度等比缩放），或者用 vw 单位做自适应。本工具只做数值换算，不干预浏览器渲染行为。
隐私保证所有计算与处理均在你的浏览器本地完成，输入数据不会上传服务器，也不会保存或共享。