移動web學習筆記

標籤：

pixel像素基礎：

像素是網頁布局的基礎。一個像素就是電腦能夠顯示一種特定顏色的最小地區。當裝置尺寸相同但像素變得更密集時，螢幕能顯示的畫面的過渡更細緻，網站看起來更明快。

px：pixel，像素，螢幕上顯示的最小單位，用於網頁設計，直觀方便；

pt：point，是一個標準的長度單位，1pt＝1/72英寸，用於印刷業，非常簡單易用；

em：即％，在CSS中，1em＝100％，是一個比率，結合CSS繼承關係使用，具有靈活性;

PPI（DPI）：pixel（dot）per inch，每英寸的像素（點）數，是一個率，表示了“清晰度”，“精度”。

分類：

實際上像素分為兩種：裝置像素和CSS像素

　　1、裝置像素(device independent pixels): 裝置螢幕的物理像素，任何裝置的物理像素的數量都是固定的

　　2、CSS像素(CSS pixels): 又稱為邏輯像素，是為web開發人員創造的，在CSS和javascript中使用的一個抽象的層

　　每一個CSS聲明和幾乎所有的javascript屬性都使用CSS像素，因此實際上從來用不上裝置像素 ，唯一的例外是screen.width/height

縮放：

在案頭端，css的1個像素往往都是對應著電腦螢幕的1個物理像素。

而在手機端，由於螢幕尺寸的限制，縮放是經常性的操作。

不論我們進行縮小或放大操作，元素設定的CSS像素(如width:300px)是始終不變的，而一個CSS像素對應多少個裝置像素是根據當前的縮放比例來決定的。

裝置像素綻放比DPR(devicePixelRatio)：

DPR = 裝置像素 / CSS像素(某一方向上)

裝置像素比DPR對應的javascript屬性window.devicePixelRatio

以iphone5為例，iphone5的CSS像素為320px*568px，DPR是2，所以其裝置像素為640px*1136px

    640(px) / 320(px)  = 2    1136(px) / 568(px) = 2    640(px)*1136(px) /  320(px)*568(px) = 4

ppi和其計算方法：

PPI：pixels per inch即每英寸所擁有的像素數。

計算方法很簡單，用長跟高的像素數計算出對角方向的像素數（直角三角形），然後再用對角的像素數除以螢幕尺寸就是ppi了
公式表達為 PPI=√（X^2+Y^2）/ Z （X：長度像素數；Y：寬度像素數；Z：螢幕大小）。

移動web學習筆記