覆盖设计开发、工程测量、日常生活等多场景的单位换算工具,纯前端实时计算,数据精确可靠。
支持 px / em / rem / pt / cm / inch / mm 等设计开发常用单位,以及长度、面积、重量、温度、角度、时间等生活工程单位
在前端开发与平面设计中,不同场景使用不同的长度单位:屏幕显示用像素(px),响应式布局用相对单位(em/rem),印刷排版用点(pt),物理尺寸用厘米(cm)或英寸(inch)。这些单位之间的换算关系并非简单的整数比,涉及 DPI、根字体大小等变量,手动计算容易出错。
本工具提供七类常用换算,所有计算均在浏览器本地完成,输入即得结果,支持双向换算与批量转换,是设计师与开发者的实用助手。
设计单位层级关系示意图(Canvas 实时绘制)
前端开发与平面设计中最高频使用的长度单位换算,支持基于根字体大小的动态计算
默认浏览器根字体为 16px,可根据项目实际设置调整
基于根字体 16px 的完整对照
| px | em | rem | pt | cm | mm | inch |
|---|
屏幕显示的最小单位,1px 对应设备上的一个物理像素(标准分辨率下)。在 CSS 中,px 是绝对单位,不随父元素字体大小变化。
相对于当前元素的字体大小。若当前元素 font-size 为 16px,则 1em = 16px。em 具有继承性,嵌套过深时容易累积计算。
相对于根元素(html)的字体大小。默认情况下 1rem = 16px。rem 避免了 em 的继承累积问题,是响应式布局的首选单位。
印刷排版传统单位,1pt = 1/72 inch ≈ 0.3528mm。在 CSS 中 1pt = 1.333px(96 DPI 标准)。常用于打印样式表(@media print)。
国际单位制长度单位。在 CSS 中,1cm 被定义为 37.795px(基于 96 DPI 的屏幕标准)。适用于需要与物理尺寸对应的场景。
英制长度单位,1 inch = 2.54cm = 25.4mm。在 CSS 中 1in = 96px(标准屏幕 DPI)。常用于打印介质和跨平台设计规范。
覆盖国际单位制、英制单位与中国市制单位的长度换算,适用于工程、建筑、手工制作等场景
长度单位对比标尺(Canvas 实时绘制)
土地面积、房屋面积、画布尺寸等场景的面积单位换算,支持公制、英制与中国市制
面积单位比例示意图(Canvas 实时绘制)
质量与重量的单位换算,覆盖公制、英制、市制及宝石计量单位(克拉)
重量单位天平示意图(Canvas 实时绘制)
三种主流温标的精确换算,附带温度曲线可视化与常见温度参考点
三温标对照曲线图(Canvas 实时绘制)
几何、三角函数、导航与工程中常用的角度单位换算,附带常用角度参考
角度单位圆示意图(Canvas 实时绘制)
时间跨度的单位换算,支持从纳秒到世纪的完整范围,适用于科学计算与日常规划
时间单位层级示意图(Canvas 实时绘制)
核心换算公式与常数汇总,便于离线查阅与编程实现
px → rempx ÷ rootFontSizerem → pxrem × rootFontSizepx → ptpx ÷ 1.333pt → pxpt × 1.333px → cmpx ÷ 37.795inch → pxinch × 96inch → cminch × 2.54ft → mft × 0.3048yd → myd × 0.9144mi → kmmi × 1.609344nmi → kmnmi × 1.852chi → mchi × 0.3333°C → °F°C × 9/5 + 32°F → °C(°F − 32) × 5/9°C → K°C + 273.15K → °CK − 273.15°F → K(°F − 32) × 5/9 + 273.15K → °F(K − 273.15) × 9/5 + 32deg → raddeg × π / 180rad → degrad × 180 / πdeg → graddeg × 200 / 180grad → deggrad × 180 / 200deg → turndeg / 360turn → degturn × 360舞墨工具资源栏目持续更新,为艺术创作者与开发者提供可靠的技术支持。