跳到主要内容

像素与设备像素比

CSS 像素是什么？​

  • CSS 像素: CSS 的长度单位, 符号 px;
  • 角色: 书写样式时使用的逻辑长度;

设备像素是什么？​

  • 设备像素 (device pixel): 设备的物理像素;
  • 关系: 与 CSS pt 单位无直接等价关系;
  • 换算浮动: 同设备改变分辨率、或换设备, 1 CSS px 对应的物理像素都会变;

设备独立像素是什么？​

  • 设备独立像素: 设备无关的逻辑像素;
  • 映射: 一个设备独立像素对应多个物理像素点;
  • 作用: 在 CSS 像素与设备像素之间做映射;

dpr 是什么？​

  • dpr: 设备像素比 (device pixel ratio);
  • 含义: 设备独立像素与设备像素的转化关系;
  • 读取: window.devicePixelRatio;
  • 示例: dpr = 2 时, 1 个 CSS px 对应 2 × 2 个设备像素;

ppi 是什么？​

  • ppi: 每英寸像素数 (pixels per inch);
  • 区别: 描述屏幕密度, 与 dpr 是两个不同指标;