一次搞清楚移動端適配這幾個坑爹的單位慨念

一次搞清楚移動端這幾個坑爹的單位慨念

目錄:

• 1、讓坑爹的單位,再也不坑爹
• 2、須要準備什麼樣的設計稿

• 3、rem方案的原理和細節

  • 高清屏上,位圖的處理
  • 高清屏上,關於border: 1px的處理
  • 移動端屏幕的自動適配的處理
  • 移動端屏幕上字體大小的處理

1、讓坑爹的單位,再也不坑爹

移動端適配自己不難,可是由於涉及到單位轉換,想要解釋清楚移動端適配方案,你必需要搞清楚各個單位的慨念。

可是因爲中英翻譯的問題,我發現不少文章在講解移動端適配時,關於單位,咱們有一萬種翻譯方法...

"物理像素、邏輯像素、物理分辨率、邏輯分辨率、實際像素、css像素、設備像素、ppi、pt、dpr。"

真的是給咱們新手學習移動端適配形成很多困惑,英語真的很重要呀。下面分享一下,我以爲最靠譜最須要理解的4個慨念。

推薦把這4個名詞記住,我以爲翻譯的很貼切,好理解。

• 物理像素(physical pixel) : 顯示器上最小的物理顯示單位,蘋果的retina屏幕很清晰吧?就是由於它的物理像素很高。
• 設備獨立像素(density-independent pixel) : 這個是計算機座標系統裏的虛擬慨念,這個點表明一個能夠由程序使用的虛擬像素(好比: css像素)
• 設備像素比(device pixel ratio) : 也叫dpr。 設備像素比 = 物理像素 / 設備獨立像素 。你也能夠經過window.devicePixelRatio獲取設備像素比
• 位圖像素 : png, jpg, gif這類都是位圖,位圖像素就是位圖的最小數據單元

舉個栗子

以iphone6來講,

• 物理像素分辨率: 750 * 1334
• 設備獨立像素分辨率 : 375 * 667
• 設備像素比: 2

不論是高清屏幕仍是普通屏幕,一個11 css像素那麼大的物理尺寸是同樣的,區別在於高清屏上一個一個11 css像素那麼大的地方,對應2*2個物理像素,因此很清晰。

在普通屏幕下1個css像素(11)對應1個物理像素(11)

在高清屏幕下1個css像素(11)對應4個物理像素(22)

不知道看完這個例子,你是否能理解這些叫法的區別。若是仍是有些迷糊,能夠看下面的補充說明 ; 若是已經瞭解,能夠跳過下面一小節。

關於這4個叫法的補充說明:

• 物理像素(physical pixel): 物理像素越大,屏幕越清晰。
• 設備獨立像素(density-independent pixel) : 也叫密度無關像素。這個設備獨立像素,就是你眼睛看到的手機大小有關。

2個手機看上去同樣大? 那他們設備獨立獨立像素就是同樣的。也就是說我無論你高清屏仍是什麼**屏設備獨立像素只跟我這個設備看上去大不大有關。

設備看上去很大? 那設備獨立像素就大 ; 設備看上去很小? 那設備獨立像素就小

因此我以爲設備獨立像素(density-independent pixel)。這個翻譯比較貼切也好理解。只跟設備看上去的大小相關。

不少翻譯也管設備獨立像素叫作: 邏輯像素 、 css像素 、 實際像素...

2、須要準備什麼樣的設計稿

• 首先，選取一款手機的屏幕寬高做爲基準(之前是iphone4的320×480，如今更多的是iphone6的375×667)。
• 對於retina屏幕(如: dpr=2)，爲了達到高清效果，視覺稿的畫布大小會是基準的2倍，也就是說像素點個數是原來的4倍（對iphone6而言：原先的375×667，就會變成750×1334）。

3、rem方案的原理和細節

rem方案的原理:

讓須要動態變化的佈局、圖片的單位都用rem來寫。好比width: 2rem

那麼2rem究竟表示多少呢? 這個和根元素html的font-size屬性相關, 好比font-size爲75px,那麼 2rem 就表示150px

因此只要html的font-size能夠根據屏幕的尺寸和dpr動態的變化,那麼全部以rem爲單位的元素都會動態變化。

這個就是rem可以適配的基本原理。至於屏幕的尺寸和dpr都是能夠經過js或者css獲取的。

細節1: 高清屏上,位圖的處理

常見的位圖,包括png / jpg / gif類型的圖片。只有一個位圖像素對應一個物理像素時,位圖纔會被高質量的顯示

因此常見的問題就是: png圖片在普通屏幕上正常顯示,可是在高清屏上,會出現位圖像素不夠的狀況,致使圖片模糊。

因此其實比較好的解決方案就是:

• 在根據不一樣的dpr,顯示不一樣的位圖。
• 另外一個就是能夠不用位圖,改用矢量圖、字體圖標、轉成base64。不用位圖天然就沒有位圖的問題了。

細節2: 高清屏上,border: 1px的處理

其實並非全部作移動端適配的人,都必定會遇到這個問題。

好比你的設計師給了一張iphone6爲基準的 750*1334 的設計稿,裏面有一個border標註的是1px。

因此設計師實際上想要的是retina屏下的1px,也就是普通屏幕下的0.5px。

但問題是: 並非手機端屏幕都支持0.5px,ios7之下或者安卓機均可能把0.5解析成0px

這裏給到一種解決方案: 設置initial-scale=0.5

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

這樣，頁面中的全部的border: 1px都將縮小0.5，從而達到border: 0.5px;的效果。

然而，頁面scale，必然會帶來一些問題：

• 字體大小會被縮放
• 頁面佈局會被縮放(如: div的寬高等)

細節3: 移動端屏幕的自動適配的處理

rem原理: 根據手機的屏幕尺寸和dpr,動態的修改html的font-size(基準值)

求rem

1 rem = document.documentElement.clientWidth * dpr / 10
    
   (1) 乘以dpr，是由於頁面有可能爲了實現1px border頁面會縮放(scale) 1/dpr 倍(若是沒有，dpr=1),。
   (2) 除以10，是爲了取整，方便計算(理論上能夠是任何值)

求iphone6的1rem 例子:

iphone6的 1rem : 375px * 2 / 10 = 75px

知道1rem是多少後,如何寫其餘的css呢?

好比width: 150px, 咱們就能夠寫成2rem

實際上,咱們每每經過一個px2rem的函數,來作轉換。算法就是 設計稿上某個div的寬度值 / 1rem的像素值, 例如 : 150px / 75px = 2rem

細節4: 移動端屏幕上字體大小的處理

移動端上,關於字體大小的需求,通常都是但願各個屏幕的字體都是保持同樣大的。

通常解決方案,就是根據dpr,設置不一樣的font-size,讓字體大小保持一致

推薦

再讀了不少文章後,以爲這篇文章講的最清楚,因此本文也算是對本身學習知識的一個整理。
http://www.html-js.com/articl...

關於viewport的講解很詳細
https://www.cnblogs.com/2050/...