前端开发中像素的概念

最近在公司实习,第一次正式接触到设计师的设计稿.我相信很多刚涉及移动端设计与开发的同学基本上会在前端开发中的像素问题上纠结很久，所以写下这篇笔记，便于自己日后翻阅。如果有啥理解上的错误，欢迎大家指正~

何为像素

我们看到所显示在屏幕上的图像,实际上都是由非常多的像素点所组成。各个像素点通过发出不同颜色的光来呈现屏幕的色彩。

下面介绍一些和像素相关的概念

设备像素(物理像素)

它是物理上的概念，随着设备生产出来就已经被确定了。例如iPhone5的分辨率是640x1136px,代表屏幕由640行,1136列像素点组成。

小知识:屏幕普遍采用RGB色域(红、绿、蓝三个子像素构成),而印刷行业普遍使用CMYK色域(青、品红、黄和黑)

CSS像素

CSS像素是web编程的概念,是相对的而不是绝对的单位，因为平常电脑屏幕1px对应了1px物理像素，所以感觉不到两者的区别，会让你误以为CSS里的1px就是实际屏幕像素

事实上只有zoom 100%的情况下,1个CSS像素才会等于1个设备像素

设备像素（深蓝色背景）和CSS像素（半透明前景）

zoom 100%

当用户进行缩小操作的时候:可以看到,一个设备像素覆盖了多个CSS像素

zoom<100%>

当用户进行放大操作的时候:可以看到一个CSS像素覆盖了多个设备像素

zoom>100%

小结:用户的缩放比会影响单位CSS像素点对应的实际物理像素的多少,看到这里，你就应该知道，CSS像素只是一个相对单位，与物理像素并不总是等价的

此像素非彼像素

正如这篇文章的前端工程师需要明白的「像素」开头中的场景，这简直是跟我刚开始实习的时候场景一模一样。

阿树：哇靠，为啥你给的设计稿是640px宽，iPhone 5不是320px宽吗？？？

玉凤：A pixel is not a pixel is not a pixel, you know ?

事实上，他们都是对的，只是谈到的不是同一个“像素”。在上一章节中我们介绍了,CSS像素并不总等于物理像素。

我们知道,iPhone 3GS的屏幕和iPhone 4/4s都是3.5英寸的。过去iPhone 3GS的时候,和平时电脑屏幕一样,在缩放比为100%的情况下,1px CSS像素对应着1px物理像素。开发者在开发网页的时候只需要写上CSS像素width:320px,height:480px。但是面对同样屏幕尺寸的iPhone4/4s,分辨率提升到了640x960，整整比3GS的分辨率大了一倍。在相同的屏幕尺寸下塞入更多的像素点，这需要引入另一个重要的概念：

像素密度(PPI,Pixels Per Inch)

PPI图示

像素密度，准确的说是每平方英寸的面积上排列的像素点数量。1英寸是一个固定长度，等于2.54厘米。像素密度越高，代表屏幕显示效果越精细。

看到这里可能你会困惑，如果像素密度提高了一倍的话，那么原本显示正常的网页岂不是变得非常的小？

比如在分辨率为320x480的iPhone 3GS上，要画一条1英寸的线条，假设需要163像素,即CSS像素设成 163 像素即可；但是在分辨率为 640×960 的 iPhone4/4s 上，163 个 CSS 像素所在手机表示实际长度只有 iPhone3GS 的一半，即 0.5 英寸。如果照这种方式显示，3GS 上刚刚好的效果，在 4/4s 上就会小到根本看不清了。

但是在现实中并没有发生这种情况,因为:

标准屏与Retina屏幕的显示区别1

也就是说,为了避免因为分辨率成倍提高造成的问题(高分辨率屏看网页看不清楚),Retina屏幕将2x2的像素当做1个像素来使用。阅览网页的时候，iPhone 4/4S与3GS是一样的显示，但是画质却更加细腻了。

标准屏与Retina屏幕的显示区别2

逻辑像素(dp,pt)

为了抹去高密度分辨率屏幕(高清屏)所带来的适配问题,iOS与Android两个平台分别提出了pt（point）与dp(device-independent pixel)两个单位。他们的名称不一样，但是内涵是一样的。下面我们以iPhone为例

例如将4/4s的逻辑像素设定为320x480pt（实际像素:640x960px）,以物理屏幕左上角为原点,横向X轴320pt,纵向Y轴480pt。所以PPI越高，1pt的所覆盖的物理像素就越多。

设备像素比（DPR，Device Pixel Ratio）

之前我们已经介绍了物理像素与逻辑像素的概念,就可以很容易推导出设备像素比的公式了

DRP = 物理像素/dp或pt

1倍：1pt=1dp=1px（iPhone 3GS）
2倍：1pt=1dp=2px（iPhone 4s/5/6）
3倍：1pt=1dp=3px（iPhone 6 plus）

总结

1个CSS像素相当于多少个物理像素,取决于:

页面缩放比
屏幕密度

所以设计师给的是640px宽的设计稿是根据设备像素(device pixel,物理像素)为单位制作的设计稿;而前端工程师参照相关的设备像素比来进行换算

比如根据iPhone5出稿的设计稿的中有一个width:100px,height:200px的按钮
那么前端工程师在编码web页面时应该写width:50px,height:100px.

他们之间的换算比例是根据设备像素比来计算的

参考文章

前端工程师需要明白的「像素」

移动端尺寸基础知识

(全解析)屏幕尺寸，分辨率，像素，PPI之间到底什么关系？

前端：移动开发 - 像素、viewport

移动端适配方案(上)

前端开发中像素的概念