如何正确理解像素、厘米与PPI之间的关系？

Question

**问题：** 在进行网页或移动端设计时，常常需要将设计稿中的尺寸（如厘米）转换为像素（px），但很多人对像素、厘米与PPI（Pixels Per Inch）之间的关系理解模糊，导致输出效果不一致。请解释像素、厘米与PPI各自的定义及其数学关系，并说明在不同PPI设备上，如何正确进行单位换算以保证视觉一致性？

Answer 1

一、基础概念：像素、厘米与PPI的定义

在进行网页或移动端设计时，理解像素（px）、厘米（cm）与PPI（Pixels Per Inch）之间的关系是实现视觉一致性的关键。

• 像素（Pixel）：是数字图像中最小的显示单位。每个像素是一个点，包含颜色信息。
• 厘米（cm）：是物理长度单位，在设计稿中常用于描述尺寸。
• PPI（Pixels Per Inch）：每英寸像素数，表示屏幕上每英寸能显示多少像素，影响图像的清晰度。

二、像素、厘米与PPI的数学关系

三者之间的换算关系如下：

• 1 英寸 = 2.54 厘米
• 像素 = 厘米 × (PPI / 2.54)
• 厘米 = 像素 × (2.54 / PPI)

例如，在 96 PPI 的设备上，1 厘米 ≈ 37.8 像素。

三、不同PPI设备上的单位换算策略

为了在不同PPI的设备上保持视觉一致性，需要根据设备的PPI进行动态换算。

设备类型	典型PPI	1cm对应像素数（px）
标准显示器	96	37.8
Retina 显示器	220	86.6
高密度手机	400	157.5

四、常见技术问题与解决方案

在实际开发中，常见的问题包括：

1. 设计稿与实际显示尺寸不一致：未考虑设备PPI差异。
2. 图片模糊：使用低PPI图片在高PPI设备上显示。
3. 布局错位：未使用响应式设计或设备像素比（DPR）。

解决方案包括：

• 使用 CSS 中的 rem 或 vw/vh 单位代替固定 px。
• 通过 window.devicePixelRatio 获取设备像素比，调整图像资源。
• 使用媒体查询和响应式设计框架（如 Bootstrap）。

五、示例代码：根据设备PPI进行动态换算

以下是一个 JavaScript 示例，用于根据设备PPI计算厘米对应的像素值：

function cmToPx(cm, ppi = 96) {
  return cm * (ppi / 2.54);
}

console.log(cmToPx(2.54)); // 输出 96px（在96PPI设备上）
  

六、流程图：从设计到适配的完整流程

以下是设计稿从尺寸设定到设备适配的完整流程图：

graph TD
      A[设计稿使用厘米单位] --> B{是否考虑设备PPI?}
      B -- 是 --> C[根据PPI换算为像素]
      B -- 否 --> D[直接使用默认PPI换算]
      C --> E[使用CSS或JS进行适配]
      D --> E
      E --> F[输出到不同设备]