因為最近有個移動端的小項目，在此稍微學習下移動端開發基礎概念。免得用框架的時候莫名其妙。

?

px(CSS pixels)：邏輯像素，瀏覽器使用的抽象單位；

dp,pt(device independent pixels)：設備無關像素；

dpr(devicePixelRatio)：設備像素放縮比；

?

計算公式：1px = (dpr)^2 * dp

?

下面先解釋下dp，為設備像素放縮比：

高清屏(Retina屏)：dpr都是大于等于2的。

?

以iPhone5為例，為640dp*1136dp。設備像素放縮比為2.0。

根據上面的公式可以得1px = (2)^2 * dp，這個是平面上的，那緯度上的就位：1px = ?2 * dp；

所以：640dp * 1136dp => 320px * 568px

?

然后解釋下上面那個ppi相關的概念：

DPI：打印機每英寸可以噴的墨汁點；

PPI：屏幕每英寸的像素數量，即單位英寸類的像素密度；

這個像素是指硬件像素非px；

以iphone5為例：

ppi = √(1136^2 + 640^2) / 4 = 326ppi ?(視網膜Retina屏)

PPI越高，像素越高，圖像越清晰。

?

如下栗子：

下面是關于html下面的viewport相關。

在移動端的開發我們一般會加這句話：

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">

就可以適應移動端了。

這里來簡單說下里面的屬性：

width：設置布局viewport的特定值（“device-width”）；

initial-scale：設置頁面的初始縮放；

minimum-scale：最少縮放；

minimum-scale：最大縮放；

user-scalable：用戶能否縮放；

總結

以上是生活随笔為你收集整理的Web笔记-移动前端开发笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。