移动开发的页面越来越多，然而关于页面尺寸、适配的问题也是我们经常遇到的，我也是出于混乱状态，在网上也看到了很多博客，越看月有些凌乱，所以就自己整理一下有关移动开发的知识
一、像素
什么是像素？
像素就是图像元素（picture element）,即一个像素就是计算机屏幕所能显示一种特定颜色的最小区域
像素分为两类：
1、设备像素（device pixel）:指的就是设备的物理像素，对于任何一个设备他的物理像素的个数是不变的。
2、css像素：这是一个抽象的概念，是专门为我们web开发提供的。
设备像素和css像素两者的关系：在缩放比例为1:1的前提下。
1、在PC端的浏览器下，一个css像素对应一个device-pixel。
2、在移动端的情况下，会具体根据屏幕的特性（比如dpr）,一个css像素对应的device-pixel的个数是不固定的。比如苹果的Retina视网膜屏幕，一个css像素横跨多个device-pixel。
总结：
1、像素分为设备像素和css像素
2、一个css像素大小是可变的。比如缩放页面比例等。但设备像素是不会变的。
二、屏幕分辨率和屏幕尺寸
我们生活中买电视、笔记本经常会听到分辨率，那么什么是分辨率？
定义：比如1920 x 1080 的分辨率，就是在一个移动设备中，纵向有1920个物理像素块，横向有1080个像素块。
屏幕尺寸就是屏幕对角线的长度，比如通常我们说的5.5的屏幕对角线长度就是5.5英寸。
三、PPI 和 DPR
1、PPI(pixel per Inch) 每英寸像素数量，也称屏幕像素密度。PPI 怎么计算呢？
2、以上计算出ppi是为了得到密度分界，获得默认缩放比例，即设备像素比DPR（device pixel ratio）
由上图可知，ppi在120-160之间的手机被归为低密度手机，160-240被归为中密度，240-320被归为高密度，320以上被归为超高密度（Apple给了它一个高大上的名字——Retina）。
获得设备像素比后，便可得知设备像素与CSS像素之间的比例。当这个比率为1:1时，使用1个设备像素显示1个CSS像素。当这个比率为2:1时，使用4个设备像素显示1个CSS像素，当这个比率为3:1时，使用9（3*3）个设备像素显示1个CSS像素。
而 CSS像素 =设备独立像素 = 逻辑像素
比如做inpone的设备像素是750x1334,这就是UI需要设计的psd的大小，而前端人员需要根据dpr进行css像素的换算。
网友评论