UI设计必备 单位换算：掌握px含义，轻松搞定界面尺寸转换 px

📱 UI设计必备 | 单位换算：掌握px含义，轻松搞定界面尺寸转换 🎨

🔍 核心概念
PX（像素）：屏幕显示的最小单位，一个像素对应一个发光点，设计时需注意物理像素（设备实际像素）与逻辑像素（设计软件中的单位）的区别！

📐 常见换算关系

• PX to PT（iOS）：1pt = 1px × 分辨率比例（如 @2x为2px，@3x为3px）
• PX to DP/SP（Android）：1dp ≈ 1px ÷ 屏幕密度（密度分档：mdpi=1x, hdpi=1.5x, xhdpi=2x, xxhdpi=3x）
• PX to REM/EM（Web）：依赖根字体大小（如 1rem=16px，可通过CSS调整基准值）

💡 实战技巧
1️⃣ 设计前确认目标设备分辨率与像素密度（DPI/PPI）
2️⃣ 使用8px网格系统保持布局对齐（如间距/尺寸设为8的倍数）
3️⃣ 导出资源时按@1x/@2x/@3x倍数生成，适配多端需求

🚀 工具推荐

• 插件：PxCook、Zeplin（自动标注与换算）
• 软件：Figma/Sketch（支持多单位切换设计）

⚠️ 注意：移动端设计需考虑不同屏幕尺寸，建议以375×812px（iPhone 13） 为基准进行设计，再通过换算适配其他设备！

📅 信息参考日期：2025-09｜持续更新行业标准 🎯