屏幕尺寸、屏幕分辨率、屏幕像素密度

屏幕尺寸、屏幕分辨率、屏幕像素密度

屏幕尺寸：   
		指屏幕的对角线的长度，单位是英寸，1英寸=2.54厘米。
	            常见的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等。
	           
屏幕分辨率：（iphone6  750*1334）
		指在横纵向上的像素点数，单位是px，1px=1个像素点。一般以纵向像素*横向像素来表示一个手机的分辨率，
	            如1960*1080。（这里的1像素指的是物理设备的1个像素点）
	            
屏幕像素密度/像素密度/屏幕密度：
		屏幕上每英寸可以显示的像素点的数量，单位是ppi，即“pixels per inch”的缩写。
		屏幕像素密度与屏幕尺寸和屏幕分辨率有关

物理像素,CSS像素

 设备像素/物理像素：（分辨率）
 			买手机的时候会有一个 n x m 的分辨率，那是屏幕的n x m个呈像的点，
 				一个点（小方格）为一个物理像素。
	        		它是屏幕能显示的最小粒度.
	        
	    	设备像素也被称为物理像素,他是显示设备中一个最微小的物理部件。
	  			 每个像素可以根据操作系统设置自己的颜色和亮度。
	    			
	    	任何设备的物理像素的数量都是固定的 
	      
CSS像素：
			CSS像素是一个抽象的单位，主要使用在浏览器上，用来精确的度量（确定）Web页面上的内容。
			
			它是为web开发者创造的，在css或者javascript中使用的一个抽象的层
			
			一般情况下，CSS像素被称为与设备无关的像素（device-independent像素），简称为“DIPs”。
			在一个标准的显示密度下(普通屏)，一个CSS像素对应着一个设备像素。
			
css像素与物理像素的关系
			一个width为200px的元素，它占据了200个css像素，但200个css像素占据多少个物理像素取决于
			屏幕的特性（是否是高密度,即像素比）和用户的缩放行为。
			
			在苹果的视网膜屏幕上，视网膜的像素密度是普通屏幕的两倍，这个元素就跨越了400个设备像素
			如果用户放大，它将跨越更多的设备像素
			
设备独立像素:设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中得一个点，
			这个点代表一个可以由程序使用的虚拟像素(比如: css像素)，
				然后由相关系统转换为物理像素。
				
位图像素：一个位图的像素是栅格图像(如：png, jpg, gif等)最小的数据单元	
		1个位图像素对应于1个物理像素，图片才能得到完美清晰的展示		
			
对于web开发者而言：
			我们使用的每一个css和javascript定义的像素本质上代表的都是css像素，我们在开发过程中
			并不在意一个css像素到底跨越了多少个设备像素。我们将这个依赖于屏幕特性和用户缩放程度的
			复杂计算交给了浏览器。

像素比

像素比:它的官方的定义为：设备物理像素和设备独立像素的比例，
		也就是 devicePixelRatio = 物理像素 /独立像素
			window.devicePixelRatio