物理像素：
由屏幕硬件決定，一個物理像素大小在不同的屏幕上是不一樣的
由於不同的屏幕一個物理像素的大小不一樣，如果采用物理像素布局，會導致網頁在不同分辨率的屏幕顯示時布局差異很大
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個物理像素，所以屏幕可以剛好被鋪滿，也很清晰