物理像素：
由屏幕硬件决定，一个物理像素大小在不同的屏幕上是不一样的
由于不同的屏幕一个物理像素的大小不一样，如果采用物理像素布局，会导致网页在不同分辨率的屏幕显示时布局差异很大
CSS像素：px
可以解决不同分辨率屏幕布局盒子大小不一样的问题
px可以屏蔽物理像素点大小不一致的差异
看不懂了吧~举个例子
一倍屏：1物理像素 = 1px
二倍屏：2物理像素 = 1px
三倍屏：3物理像素 = 1px
为什么要有二倍图：
以上图为例
假设有一张图片的尺寸是320*480像素，要求分别铺满iphone3和iphone4中一个320*480px的盒子（即铺满全屏）
由于iphone3使用的是一倍屏，1px对应1个物理像素，所以屏幕可以刚好被铺满
但是iphone4使用的是二倍屏幕，1px对应2个物理像素，所以正常只能填充屏幕宽高的一半，于是我们将图片的宽高设置成320*480px，于是换算成像素点后，等同于用640*960个像素点显示原本只需要320*480个像素点就能显示的内容，于是图片就变得模糊了
于是二倍图出现了：
假设有一张图片的尺寸是640*960像素，要求分别铺满iphone3和iphone4中一个320*480px的盒子（即铺满全屏）
由于iphone3使用的是一倍屏，1px对应1个物理像素，640*960像素的图片需要一个640*960px的盒子才能显示完整，于是我们将图片的宽高设置成320*480px，等同于用320*480个像素点，显示原本需要640*960个像素点才能显示的内容，于是图片很清晰
但是iphone4使用的是二倍屏幕，1px对应2个物理像素，所以屏幕可以刚好被铺满，也很清晰