移动端 css 物理像素 适配问题

移动端 css 物理像素 适配问题

本Markdown编辑器使用[StackEdit][6]修改而来，用它写博客，将会带来全新的体验哦：

---

一些概念

• 物理像素（physical pixel）
  即：设备像素（device pixel）。
  本质是屏幕上的点，这个是跟设备有关系

• CSS像素（css pixel）
  指的是CSS样式代码中使用的逻辑像素（或者叫虚拟像素）。
  软件要在设备上显示，css规定了长度单位（绝对单位和相对单位），比如：px 是一个 相对单位 ，相对的是 物理像素（physical pixel）

• 设备像素比（device pixel ratio） dpr
  公式：物理像素数（硬件） / 逻辑像素数（软件），即（物理像素/CSS像素）。
  在css中，可以通过 -webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio 和 -webkit-max-device-pixel-ratio 进行媒体查询，对不同dpr的设备，做一些样式适配。
  如： dpr = 2 时，1个CSS像素 = 4个物理像素。因为像素点都是正方形，所以当1个CSS像素需要的物理像素增多2倍时，其实就是长和宽都增加了2倍