PT转PX计算器

专业CSS单位转换工具，完美兼容蓝湖、墨刀、即时设计等国内主流设计平台。前端开发者和UI设计师的效率神器，精确转换PT到PX，让你的CSS代码更专业。

支持蓝湖标注兼容墨刀设计即时设计适配CSS代码直用

磅值 (pt)

像素值 (px)

12pt × (96/72) = 16px

标准屏幕分辨率：96 DPI，打印分辨率：72 DPI

完美适配国内设计工具

直接使用设计稿中的PT值，自动转换为CSS像素单位，无缝对接前端开发流程

蓝湖

蓝湖标注

直接复制PT数值转换

墨刀

墨刀原型

原型标注精确转换

即时

即时设计

设计稿数值转换

Photoshop

传统设计工具适配

前端开发者PT转PX使用指南

专为中国前端开发者打造的CSS单位转换工具。从设计稿到代码实现，让你的开发效率翻倍！

从设计稿获取PT值

在蓝湖、墨刀或即时设计中查看设计标注，直接复制PT数值输入。支持小数点精度，确保还原度100%。

一键精确转换

基于Web标准96 DPI自动计算，转换结果精确到小数点后2位，完美适配现代浏览器渲染标准。

复制CSS代码

一键复制带px单位的完整值，直接粘贴到CSS、SCSS、Less或任何前端框架样式文件中，即用即走。

CSS代码示例

字体大小转换

/* 设计稿标注: 14pt */

font-size: 18.67px;

/* 或使用变量 */

--font-size-body: 18.67px;

行高间距转换

/* 设计稿标注: 20pt */

line-height: 26.67px;

/* 或相对单位 */

line-height: 1.43; /* 26.67/18.67 */

前端框架完美适配

转换结果可直接用于各种主流前端框架和CSS预处理器

React/Vue组件

style={{

fontSize: '18.67px'

}}

Tailwind CSS

className=

"text-[18.67px]"

SCSS/Sass

$font-size:

18.67px;

CSS-in-JS

fontSize:

'18.67px'

PT转PX完整对照表

常用字体大小转换对照表，收藏这个页面，开发效率提升100%

PT值	PX值	常用场景	CSS代码
8pt	10.67px	辅助说明文字	font-size: 10.67px;
9pt	12px	小号正文	font-size: 12px;
10pt	13.33px	表格文字	font-size: 13.33px;
12pt	16px	标准正文	font-size: 16px;
14pt	18.67px	大号正文	font-size: 18.67px;
16pt	21.33px	小标题	font-size: 21.33px;
18pt	24px	中等标题	font-size: 24px;
20pt	26.67px	大标题	font-size: 26.67px;
24pt	32px	页面主标题	font-size: 32px;
36pt	48px	特大标题	font-size: 48px;

💡 开发小贴士：使用浏览器书签保存此页面，随时快速查阅常用转换值

📌 收藏对照表

深入理解PT与PX单位差异

掌握CSS单位本质，提升前端开发专业度。了解何时使用PT、何时使用PX，让你的代码更规范。

中国前端开发常见转换场景

蓝湖设计稿还原

设计师在蓝湖上传Sketch/Figma设计稿时，字体单位常显示为PT。前端开发时需要转换为PX才能在CSS中使用。

企业设计规范适配

大厂设计规范多采用PT单位，转换为PX后可直接应用到React、Vue等前端框架组件库中。

响应式设计优化

移动端适配时，PT转PX后更容易进行rem、em等相对单位的二次转换，提升响应式设计效果。

小程序开发适配

微信小程序、支付宝小程序等平台开发时，设计稿PT值转换为PX后更便于使用rpx等自适应单位。

CSS单位选择最佳实践

PX - 精确控制

适用于边框、阴影、小图标等需要精确像素控制的场景，是前端开发最常用的单位。

REM - 响应式设计

基于根元素字体大小计算，适合做响应式设计和整体缩放，是移动端开发的首选单位。

EM - 相对布局

基于父元素字体大小计算，适合组件内部的相对布局，在组件化开发中很实用。

VW/VH - 视口适配

基于视口大小计算，是移动端全屏适配和大屏数据可视化的最佳选择。

PT转PX转换原理与计算公式

🔥 快速记忆法

PT × 1.333 = PX

记住这个魔法数字：1.333

• 12pt × 1.333 = 16px (最常用)

• 14pt × 1.333 = 18.67px

• 16pt × 1.333 = 21.33px

• 18pt × 1.333 = 24px

📐 技术原理

Web标准DPI:96 DPI

印刷标准DPI:72 DPI

转换系数:96÷72 = 1.333

这个比率确保了字体在屏幕上的显示大小与设计稿保持一致

💻 JavaScript实现代码

// PT转PX转换函数

function ptToPx(pt) {

return Math.round(pt * 1.33333 * 100) / 100;

}

// 使用示例

const fontSize = ptToPx(14); // 18.67

const lineHeight = ptToPx(20); // 26.67

国内前端开发PT转PX最佳实践

基于中国互联网公司真实项目经验总结的PT转PX使用指南，助你成为更专业的前端工程师。

🎨设计协作场景

✓蓝湖/墨刀设计稿标注还原
✓Figma/Sketch设计系统对接
✓UI组件库字体规范制定
✓企业级设计token管理

⚡开发效率提升

→CSS变量统一管理字体大小
→Sass/Less函数自动转换
→Webpack插件批量处理
→VSCode插件快速转换

📱移动端适配

▶H5页面适配多种屏幕
▶小程序rpx单位配合使用
▶响应式设计断点设置
▶大屏数据可视化适配

🚀 高效工作流程建议

✅ 推荐做法

👍

建立CSS变量体系

--font-size-sm: 12px; --font-size-base: 16px;

👍

使用设计token管理

统一团队设计规范，保持视觉一致性

👍

转换后四舍五入

保留1-2位小数，避免渲染差异

❌ 避免的错误

👎

直接使用PT单位写CSS

浏览器支持有限，渲染可能不准确

👎

忽略小数点精度

可能导致整体排版对齐问题

👎

混用多种字体单位

增加维护成本，影响设计一致性

前端开发者常见问题解答

解答中国前端开发者在PT转PX使用过程中最关心的技术问题和实际应用场景。

🤔为什么蓝湖标注是PT，但我需要PX写CSS？

设计师在Sketch、Figma等工具中习惯使用PT单位，因为PT是印刷行业标准，便于跨媒体设计。但浏览器CSS主要支持PX单位进行精确渲染。PT转PX后可确保设计稿在网页中的还原度达到100%。

实用技巧：蓝湖等工具通常支持切换显示单位，建议开发时直接看PX标注值。

💡转换后的小数点会影响渲染效果吗？

现代浏览器支持亚像素渲染，小数点PX值是完全可用的。例如font-size: 18.67px在Chrome、Safari、Firefox中都能正确显示。建议保留1-2位小数，既保证精度又便于阅读。

最佳实践：如果追求整数值，可使用Math.round()四舍五入，但可能损失设计精度。

⚡如何在React/Vue项目中高效处理PT转PX？

建议创建工具函数或使用CSS变量统一管理。在大型项目中，可以考虑webpack插件或postcss插件自动转换，提升开发效率。

// React Hook示例

const ptToPx = (pt) => Math.round(pt * 1.33333 * 100) / 100;

const fontSize = ptToPx(14); // 18.67px

📱移动端适配时，PT转PX还需要再转换为rem吗？

这取决于你的适配方案。如果使用rem适配，建议PT→PX→rem两步转换。如果使用vw方案，则PT→PX→vw。现在很多团队采用px2rem或px2vw工具链自动处理。

小程序特殊情况：微信小程序建议使用rpx单位，可直接将PX值用作rpx值。

🎯转换后的字体在不同浏览器显示一致吗？

PT转PX基于Web标准，在主流浏览器（Chrome、Safari、Firefox、Edge）中显示基本一致。但不同操作系统的字体渲染引擎略有差异，建议在多端测试关键页面的字体效果。

兼容性提示：IE浏览器对小数点PX支持有限，如需兼容可考虑四舍五入到整数。

🔧有没有推荐的VSCode插件或开发工具？

推荐使用"px to rem"类型的插件，大多支持PT转换。也可以配置Snippet快捷输入。对于团队项目，建议将转换函数封装为npm包或内部工具库。

效率提升：将本页面加入浏览器书签，随时快速查阅常用转换值！

🚀 立即提升你的前端开发效率

专业PT转PX计算器，完美适配蓝湖、墨刀、即时设计。一键转换，精确还原，让设计稿完美落地成代码！

马上开始转换

已帮助 10万+ 开发者提升效率

免费使用精确计算一键复制响应式设计