PX 转 PT 工具

工具简介：PX 转 PT 工具

PX 转 PT 工具是一个专业的像素(PX)和点(PT)单位转换器，支持自定义DPI设置，适用于网页设计、印刷设计、UI设计等多种场景。

什么是PX 转 PT 工具？

PX 转 PT 用于在PX与PT之间快速转换，输出可直接用于PT场景。

如何使用

1. 粘贴PX内容或输入参数。
2. 选择输出为PT并设置转换选项。
3. 查看结果并复制或下载。

常见应用场景

• PX 与 PT 之间的格式迁移与对接
• 将 PX 数据用于 PT 生态或代码生成
• 调试与验证转换是否符合规范

❓ 常见问题 FAQ

Q1：转换失败或结果为空？
A：请确认PX格式是否有效，必要时先格式化或清洗输入。

Q2：转换后顺序或缩进改变？
A：输出会遵循PT语法规则，可能调整空白或键顺序。

Q3：如何批量处理？
A：建议分批转换以避免单次输入过大。

✨ 主要特性

• 🔄 双向转换：支持PX到PT和PT到PX的双向转换
• 🎛️ DPI设置：支持常用DPI值(72, 96, 150, 300)和自定义DPI
• 📊 实时计算：输入数值后实时显示转换结果
• 📋 一键复制：快速复制转换结果，支持单位后缀
• 🔄 数值交换：一键交换PX和PT数值
• 📈 转换表格：提供常用数值的转换对照表
• 📐 公式说明：显示转换公式和当前DPI设置

📖 转换公式

PX 转 PT

PT = PX × 72 ÷ DPI

PT 转 PX

PX = PT × DPI ÷ 72

其中：

• PX：像素单位，屏幕显示的基本单位
• PT：点单位，印刷行业的标准单位
• DPI：每英寸点数(Dots Per Inch)

🎯 使用场景

1. 网页设计

在响应式设计中，需要将设计稿的PT单位转换为CSS的PX单位：

/* 设计稿字体大小：12pt */
/* 在96 DPI下转换为PX */
font-size: 16px; /* 12pt × 96 ÷ 72 = 16px */

/* 设计稿行高：18pt */
line-height: 24px; /* 18pt × 96 ÷ 72 = 24px */

2. 印刷设计

将网页的PX单位转换为印刷的PT单位：

/* 网页标题：24px */
/* 转换为300 DPI印刷单位 */
/* 24px × 72 ÷ 300 = 5.76pt */

/* 网页正文：16px */
/* 转换为300 DPI印刷单位 */
/* 16px × 72 ÷ 300 = 3.84pt */

3. UI设计系统

建立统一的设计规范：

// 设计系统中的字体大小转换
const fontSizes = {
  // 基于12pt基础字体，96 DPI
  small: '12px',    // 9pt
  base: '16px',     // 12pt
  large: '20px',    // 15pt
  xlarge: '24px',   // 18pt
  xxlarge: '32px'   // 24pt
}

// DPI转换函数
function ptToPx(pt, dpi = 96) {
  return Math.round(pt * dpi / 72)
}

function pxToPt(px, dpi = 96) {
  return Math.round(px * 72 / dpi * 100) / 100
}

📱 常用DPI说明

72 DPI

• 用途：传统Mac显示器标准
• 特点：1pt = 1px，转换最简单
• 应用：早期Mac设计、PDF文档

96 DPI

• 用途：Windows系统默认DPI
• 特点：现代Web开发标准
• 应用：网页设计、Windows应用

150 DPI

• 用途：高分辨率显示器
• 特点：1.5倍缩放比例
• 应用：高清显示器、移动设备

300 DPI

• 用途：印刷行业标准
• 特点：高质量印刷输出
• 应用：书籍、杂志、海报印刷

🔧 实际应用示例

响应式字体设计

/* 基础字体系统 */
:root {
  /* 基于16px = 12pt (96 DPI) */
  --font-size-xs: 12px;   /* 9pt */
  --font-size-sm: 14px;   /* 10.5pt */
  --font-size-base: 16px; /* 12pt */
  --font-size-lg: 18px;   /* 13.5pt */
  --font-size-xl: 20px;   /* 15pt */
  --font-size-2xl: 24px;  /* 18pt */
  --font-size-3xl: 30px;  /* 22.5pt */
}

/* 印刷样式 */
@media print {
  :root {
    /* 转换为300 DPI印刷单位 */
    --font-size-xs: 2.88pt;   /* 12px */
    --font-size-sm: 3.36pt;   /* 14px */
    --font-size-base: 3.84pt; /* 16px */
    --font-size-lg: 4.32pt;   /* 18px */
    --font-size-xl: 4.8pt;    /* 20px */
    --font-size-2xl: 5.76pt;  /* 24px */
    --font-size-3xl: 7.2pt;   /* 30px */
  }
}

设计稿转换工具

class DesignConverter {
  constructor(designDPI = 72, targetDPI = 96) {
    this.designDPI = designDPI
    this.targetDPI = targetDPI
  }

  // 设计稿PT转开发PX
  ptToPx(pt) {
    return Math.round(pt * this.targetDPI / 72)
  }

  // 开发PX转设计稿PT
  pxToPt(px) {
    return Math.round(px * 72 / this.targetDPI * 100) / 100
  }

  // 批量转换设计稿
  convertDesignSpec(spec) {
    const converted = {}
    for (const [key, value] of Object.entries(spec)) {
      if (typeof value === 'number') {
        converted[key] = this.ptToPx(value)
      } else if (typeof value === 'object') {
        converted[key] = this.convertDesignSpec(value)
      } else {
        converted[key] = value
      }
    }
    return converted
  }
}

// 使用示例
const converter = new DesignConverter(72, 96)

const designSpec = {
  typography: {
    h1: 24,      // 24pt
    h2: 20,      // 20pt
    body: 14,    // 14pt
    caption: 12  // 12pt
  },
  spacing: {
    xs: 4,       // 4pt
    sm: 8,       // 8pt
    md: 16,      // 16pt
    lg: 24,      // 24pt
    xl: 32       // 32pt
  }
}

const cssSpec = converter.convertDesignSpec(designSpec)
console.log(cssSpec)
// 输出：
// {
//   typography: { h1: 32, h2: 27, body: 19, caption: 16 },
//   spacing: { xs: 5, sm: 11, md: 21, lg: 32, xl: 43 }
// }

💡 使用技巧

1. 精确转换

• 使用小数点后4位精度确保转换准确性
• 考虑四舍五入对视觉效果的影响
• 在关键尺寸上进行手动微调

2. 设计一致性

• 建立基础单位系统（如8px网格）
• 使用倍数关系保持比例协调
• 在不同DPI下测试视觉效果

3. 性能优化

• 预计算常用转换值
• 使用CSS变量统一管理尺寸
• 避免运行时频繁计算

⚠️ 注意事项

1. DPI选择：根据目标平台选择正确的DPI值
2. 精度处理：注意浮点数精度可能导致的视觉差异
3. 兼容性：不同浏览器对小数像素的处理可能不同
4. 用户体验：确保转换后的尺寸在目标设备上显示正常

🔗 相关工具

• CSS单位转换器：支持em、rem、vh、vw等单位转换
• 响应式设计工具：帮助设计多屏幕适配方案
• 字体大小计算器：计算最佳字体大小和行高比例
• 网格系统生成器：创建基于像素的网格系统

通过PX转PT工具，您可以轻松处理不同设计环境下的单位转换需求，确保设计的一致性和准确性。