了解移動web畫素的知識，主要是為了切圖時心中有數。本文主要圍繞乙個問題：怎樣根據裝置廠商提供的螢幕尺寸和物理畫素得到我們切圖需要的邏輯畫素？圍繞這個問題以iphone5為例講解涉及到的web畫素相關知識。
1、 iphone5的相關引數
iphone 5
處理器蘋果a6處理器，1.3ghz
螢幕 四英吋1136 × 640 retina display
主攝像頭
800萬畫素
前置攝像頭
120萬畫素
快閃儲存器
16gb 32gb 64gb
機身
前鋼化玻璃面板，後混合面板+金屬邊框
手機尺寸
123.8×58.6×7.6mm
網路支援
2g：gsm 850/900/1800/1900
3g：cdma ev-do rev.a
wcdma 850/900/1900/2100
中國移動2g 中國聯通2g/3g/4g(美版v版支援電信3g)
2、勾股定理：直角三角形，2直角邊的平方和等於斜邊的平方！
px:css pixels 邏輯畫素，瀏覽器使用的抽象單位【切圖用邏輯畫素】
dp:device independent pixels 裝置無關畫素，即物理畫素 【裝置廠商會提供物理畫素】
dpr：devicepixelratio裝置畫素縮放比 【處理物理畫素和邏輯畫素的關係，具體換算關係後面再講】
dpi:印表機每英吋可以噴的墨汁點（印刷行業）
ppi:即pixels per inch，螢幕每英吋的畫素數量，即單位英吋內的畫素密度
在計算機顯示裝置引數描述上，二者意思一致。
ppi越高，畫素數越高，影象越清晰
retina屏（高清屏）：dpr都是大於等於2
由對應關係可以看出，ppi越高，系統預設設定縮放比越大，可視度越低（小）。
由前置知識能得知iphone5的畫素資訊：四英吋1136 × 640 retina display
首先根據勾股定理計算出iphone5手機螢幕的對角線等效畫素，然後除以對角線(4英吋)，就得到ppi為326.
注意一點：計算時用的是物理畫素，而不是px。
根據3.1的對應關係，可知iphone5的ppi為326對應的螢幕縮放比dpr為2
在移動端瀏覽器中及某些桌面瀏覽器中，window物件有乙個devicepixelratio屬性，我們可以通過window.devicepixelratio直接獲取到裝置的dpr。
我們已經知道iphone5的dpr為2，給出乙個畫素在iphone5中的形象圖如下：
這個圖可以從2個角度理解
由前置知識能得知iphone5的畫素資訊：四英吋1136 × 640 retina display
現在也已經知道iphone5的dpx為2，再根據上面的計算公式可以算出針對iphone5切圖時其邏輯畫素為：320px*568px。
整個關係串聯起來如下：
參考：
移動web開發rem,em及畫素知識詳解
css畫素指的是通過css進行網頁布局時用到的單位，其預設值 pc端 是和物理畫素保持一致的 1個單位的css畫素等於1個單位的物理畫素 但是我們可通縮放來改變其大小 我們需要理解的是物理畫素和css畫素的乙個關係，1個物理畫素並不總是等於乙個css畫素，通過調整瀏覽器縮放比例，視口 viewpor...
移動開發 畫素知識
抽象單位 可以根據不同裝置關係來變大變小。而物理畫素是固定的，不會改變。例如 iphone5 1個css畫素 4個物理畫素 上圖中1136和640的單位是dp window.devicepixelratio是裝置上 物理畫素 和 裝置獨立畫素 dip或dp device independent pi...
移動web 1畫素邊框
1px縮放都0.5px的狀態下，而0.5px並不是所有都支援，再根據 查詢設定不同的縮放比例就可以了，那麼我們就開始玩兒縮放吧。1.用height 1px的div，然後根據 查詢設定transform scaley 0.5 div2.用 after和 befor,設定border bottom 1p...