Open wujunchuan opened 7 years ago
最近在美柚实习,第一次正式接触到设计师的设计稿.我相信很多刚涉及移动端设计与开发的同学基本上会在前端开发中的像素问题上纠结很久，所以写下这篇笔记，便于自己日后翻阅。如果有啥理解上的错误，欢迎大家指正~
我们看到所显示在屏幕上的图像,实际上都是由非常多的像素点所组成。各个像素点通过发出不同颜色的光来呈现屏幕的色彩。
下面介绍一些和像素相关的概念
它是物理上的概念，随着设备生产出来就已经被确定了。例如iPhone5的分辨率是640x1136px,代表屏幕由640行,1136列像素点组成。
640x1136px
小知识:屏幕普遍采用RGB色域(红、绿、蓝三个子像素构成),而印刷行业普遍使用CMYK色域(青、品红、黄和黑)
CSS像素是web编程的概念,是相对的而不是绝对的单位，因为平常电脑屏幕1px对应了1px物理像素，所以感觉不到两者的区别，会让你误以为CSS里的1px就是实际屏幕像素
CSS像素
1px
事实上只有zoom 100%的情况下,1个CSS像素才会等于1个设备像素
zoom 100%
设备像素（深蓝色背景）和CSS像素（半透明前景）
当用户进行缩小操作的时候:可以看到,一个设备像素覆盖了多个CSS像素
当用户进行放大操作的时候:可以看到一个CSS像素覆盖了多个设备像素
小结:用户的缩放比会影响单位CSS像素点对应的实际物理像素的多少,看到这里，你就应该知道，CSS像素只是一个相对单位，与物理像素并不总是等价的
正如这篇文章的前端工程师需要明白的「像素」开头中的场景，这简直是跟我刚开始实习的时候场景一模一样。
阿树：哇靠，为啥你给的设计稿是640px宽 ，iPhone 5不是320px宽吗？？？ 玉凤：A pixel is not a pixel is not a pixel, you know ?
阿树：哇靠，为啥你给的设计稿是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的分辨率大了一倍。在相同的屏幕尺寸下塞入更多的像素点，这需要引入另一个重要的概念：
width:320px,height:480px
640x960
像素密度，准确的说是每平方英寸的面积上排列的像素点数量。1英寸是一个固定长度，等于2.54厘米。像素密度越高，代表屏幕显示效果越精细。
看到这里可能你会困惑，如果像素密度提高了一倍的话，那么原本显示正常的网页岂不是变得非常的小？
比如在分辨率为320x480的iPhone 3GS上，要画一条1英寸的线条，假设需要163像素,即CSS像素设成 163 像素即可；但是在分辨率为 640×960 的 iPhone4/4s 上，163 个 CSS 像素所在手机表示实际长度只有 iPhone3GS 的一半，即 0.5 英寸。如果照这种方式显示，3GS 上刚刚好的效果，在 4/4s 上就会小到根本看不清了。
320x480
640×960
但是在现实中并没有发生这种情况,因为:
也就是说,为了避免因为分辨率成倍提高造成的问题(高分辨率屏看网页看不清楚),Retina屏幕将2x2的像素当做1个像素来使用。阅览网页的时候，iPhone 4/4S与3GS是一样的显示，但是画质却更加细腻了。
为了抹去高密度分辨率屏幕(高清屏)所带来的适配问题,iOS与Android两个平台分别提出了pt（point）与dp(device-independent pixel)两个单位。他们的名称不一样，但是内涵是一样的。下面我们以iPhone为例
pt（point）
dp(device-independent pixel)
例如将4/4s的逻辑像素设定为320x480pt（实际像素:640x960px）,以物理屏幕左上角为原点,横向X轴320pt,纵向Y轴480pt。所以PPI越高，1pt的所覆盖的物理像素就越多。
320x480pt
640x960px
之前我们已经介绍了物理像素与逻辑像素的概念,就可以很容易推导出设备像素比的公式了
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.
width:100px,height:200px
width:50px,height:100px
他们之间的换算比例是根据设备像素比来计算的
前端工程师需要明白的「像素」
移动端尺寸基础知识
(全解析)屏幕尺寸，分辨率，像素，PPI之间到底什么关系？
前端：移动开发 - 像素、viewport
移动端适配方案(上)
前端开发中像素的概念
最近在美柚实习,第一次正式接触到设计师的设计稿.我相信很多刚涉及移动端设计与开发的同学基本上会在前端开发中的像素问题上纠结很久，所以写下这篇笔记，便于自己日后翻阅。如果有啥理解上的错误，欢迎大家指正~
何为像素
下面介绍一些和像素相关的概念
设备像素(物理像素)
它是物理上的概念，随着设备生产出来就已经被确定了。例如iPhone5的分辨率是
640x1136px,代表屏幕由640行,1136列像素点组成。CSS像素
CSS像素是web编程的概念,是相对的而不是绝对的单位，因为平常电脑屏幕1px对应了1px物理像素，所以感觉不到两者的区别，会让你误以为CSS里的1px就是实际屏幕像素事实上只有
zoom 100%的情况下,1个CSS像素才会等于1个设备像素当用户进行缩小操作的时候:可以看到,一个设备像素覆盖了多个CSS像素
当用户进行放大操作的时候:可以看到一个CSS像素覆盖了多个设备像素
小结:用户的缩放比会影响单位CSS像素点对应的实际物理像素的多少,看到这里，你就应该知道，CSS像素只是一个相对单位，与物理像素并不总是等价的
此像素非彼像素
正如这篇文章的前端工程师需要明白的「像素」开头中的场景，这简直是跟我刚开始实习的时候场景一模一样。
事实上，他们都是对的，只是谈到的不是同一个“像素”。在上一章节中我们介绍了,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)
像素密度，准确的说是每平方英寸的面积上排列的像素点数量。1英寸是一个固定长度，等于2.54厘米。像素密度越高，代表屏幕显示效果越精细。
比如在分辨率为
320x480的iPhone 3GS上，要画一条1英寸的线条，假设需要163像素,即CSS像素设成 163 像素即可；但是在分辨率为640×960的 iPhone4/4s 上，163 个 CSS 像素所在手机表示实际长度只有 iPhone3GS 的一半，即 0.5 英寸。如果照这种方式显示，3GS 上刚刚好的效果，在 4/4s 上就会小到根本看不清了。但是在现实中并没有发生这种情况,因为:
也就是说,为了避免因为分辨率成倍提高造成的问题(高分辨率屏看网页看不清楚),Retina屏幕将2x2的像素当做1个像素来使用。阅览网页的时候，iPhone 4/4S与3GS是一样的显示，但是画质却更加细腻了。
逻辑像素(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个CSS像素相当于多少个物理像素,取决于:
所以设计师给的是640px宽的设计稿是根据设备像素(device pixel,物理像素)为单位制作的设计稿;而前端工程师参照相关的设备像素比来进行换算
比如根据iPhone5出稿的设计稿的中有一个
width:100px,height:200px的按钮 那么前端工程师在编码web页面时应该写width:50px,height:100px.他们之间的换算比例是根据设备像素比来计算的
参考文章
前端工程师需要明白的「像素」
移动端尺寸基础知识
(全解析)屏幕尺寸，分辨率，像素，PPI之间到底什么关系？
前端：移动开发 - 像素、viewport
移动端适配方案(上)