一直以來，本人對移動端解析度、畫素等概念傻傻分不清，特查閱多位牛人部落格後總結如下要點，以便日後檢視。

文件來源

螢幕解析度

是指螢幕上垂直方向和水平方向上的畫素個數，單位是px。常見取值 480X800,320X480等

IPhone手機的螢幕解析度如下圖：

結論：
1、一個裝置的解析度是固定不變的————在同一個裝置上，它的畫素個數是固定的，這是廠商在出廠時就設定好的。
2、當瀏覽器頁面縮放比為1時，螢幕解析度 = CSS畫素；

螢幕尺寸

    是指螢幕對角線的長度，單位是英寸
    1英寸（inch）=2.54釐米（cm）

DPI&PPI (螢幕畫素密度)

    DPI(dots per inch)為印表機每英寸可以噴的墨汁點數，用於印刷行業中度量空間點的密度
    PPI(pixels per inch)為螢幕每英寸的畫素數量(即在一個對角線長度為1英寸的正方形內所擁有的畫素數)，用於度量計算機顯示屏上畫素的密度
    目前PPI(主要是iOS)和DPI(比如在Android中)都會用在計算機顯示裝置的引數描述中，並且二者的意思是一樣的，都是代表畫素密度

這項指標是連線數字世界與物理世界的橋樑，畫素密度越高，代表螢幕顯示效果越精細。

螢幕的清晰程度其實是解析度和尺寸大小共同決定，用ppi指數衡量螢幕清晰程度更加準確。同樣畫素大小的元素，在高PPI的螢幕上顯示的比較小，在低PPI螢幕上比較大(如下圖)

螢幕畫素密度、解析度、螢幕尺寸的關係

如解析度為1920px*1080px，則1920px就是公式裡的縱向，1080px就是公式裡的橫向了

附：電腦螢幕解析度可調的原因

電腦系統推薦的是1366px*768px的解析度，這意味著微軟在這塊螢幕上橫向設定了768個畫素，豎向設定了1366個畫素。再怎麼拉伸，這個數字是不會變了。如果把解析度調成800*600，系統就會分配給你800*600個有效畫素個數，也就是真實的色彩塊。其他的個數呢，就由系統自作主張，通過一系列運算給你一個模擬色彩塊，填充成正好1366*768個色彩塊。這些拿來充數的畫素塊，和真實的畫素塊放到一起。就好比一個正規軍，裡面摻了很多雜牌軍一樣。

附：css中的1px並不等於裝置的1px

畫素只是一個抽象的單位，在不同的裝置或不同的環境中，css中的1px所代表的裝置物理畫素是不同的。
在為桌面瀏覽器設計的網頁中，css的1個畫素往往都是對應著電腦螢幕的1個物理畫素,所以我們無需對這個津津計較，但在移動裝置上，必須弄明白這點。
在早先的移動裝置中，螢幕畫素密度(PPI)都比較低，如iphone3，它的解析度為320x480，在iphone3上，一個css畫素確實是等於一個螢幕物理畫素的。後來隨著技術的發展，移動裝置的螢幕畫素密度越來越高，從iphone4開始，蘋果公司便推出了所謂的Retina屏，解析度提高了一倍，變成640x960，但螢幕尺寸卻沒變化，這就意味著同樣大小的螢幕上，畫素卻多了一倍，這時，一個css畫素是等於兩個物理畫素的。其他品牌的移動裝置也是這個道理。例如安卓裝置根據螢幕畫素密度可分為ldpi、mdpi、hdpi、xhdpi等不同的等級，解析度也是五花八門，安卓裝置上的一個css畫素相當於多少個螢幕物理畫素，也因裝置的不同而不同，沒有一個定論。
還有一個因素也會引起css中px的變化，那就是使用者縮放。例如，當用戶把頁面放大一倍，那麼css中1px所代表的物理畫素也會增加一倍；反之把頁面縮小一倍，css中1px所代表的物理畫素也會減少一倍。