摘要：真的是給我們新手學(xué)習(xí)移動(dòng)端適配造成不少困惑英語(yǔ)真的很重要呀。細(xì)節(jié)高清屏上的處理其實(shí)并不是所有做移動(dòng)端適配的人都一定會(huì)遇到這個(gè)問(wèn)題。

目錄:

一、讓坑爹的單位,不再坑爹

二、需要準(zhǔn)備什么樣的設(shè)計(jì)稿

三、rem方案的原理和細(xì)節(jié)

高清屏上,位圖的處理

高清屏上,關(guān)于border: 1px的處理

移動(dòng)端屏幕的自動(dòng)適配的處理

移動(dòng)端屏幕上字體大小的處理

移動(dòng)端適配本身不難,但是因?yàn)樯婕暗絾挝晦D(zhuǎn)換,想要解釋清楚移動(dòng)端適配方案,你必須要搞清楚各個(gè)單位的慨念。

但是由于中英翻譯的問(wèn)題,我發(fā)現(xiàn)很多文章在講解移動(dòng)端適配時(shí),關(guān)于單位,我們有一萬(wàn)種翻譯方法...

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

真的是給我們新手學(xué)習(xí)移動(dòng)端適配造成不少困惑,英語(yǔ)真的很重要呀。下面分享一下,我覺(jué)得最靠譜最需要理解的4個(gè)慨念。

推薦把這4個(gè)名詞記住,我覺(jué)得翻譯的很貼切,好理解。

物理像素(physical pixel) : 顯示器上最小的物理顯示單位,蘋(píng)果的retina屏幕很清晰吧?就是因?yàn)樗奈锢硐袼睾芨摺?/p>

設(shè)備獨(dú)立像素(density-independent pixel) : 這個(gè)是計(jì)算機(jī)坐標(biāo)系統(tǒng)里的虛擬慨念,這個(gè)點(diǎn)代表一個(gè)可以由程序使用的虛擬像素(比如: css像素)

設(shè)備像素比(device pixel ratio) : 也叫dpr。 設(shè)備像素比 = 物理像素 / 設(shè)備獨(dú)立像素 。你也可以通過(guò)window.devicePixelRatio獲取設(shè)備像素比

位圖像素 : png, jpg, gif這類都是位圖,位圖像素就是位圖的最小數(shù)據(jù)單元

以iphone6來(lái)說(shuō),

物理像素分辨率: 750 * 1334

設(shè)備獨(dú)立像素分辨率 : 375 * 667

設(shè)備像素比: 2

不管是高清屏幕還是普通屏幕,一個(gè)11 css像素那么大的物理尺寸是一樣的,區(qū)別在于高清屏上一個(gè)一個(gè)11 css像素那么大的地方,對(duì)應(yīng)2*2個(gè)物理像素,所以很清晰。

在普通屏幕下1個(gè)css像素(11)對(duì)應(yīng)1個(gè)物理像素(11)

在高清屏幕下1個(gè)css像素(11)對(duì)應(yīng)4個(gè)物理像素(22)

不知道看完這個(gè)例子,你是否能理解這些叫法的區(qū)別。如果還是有些迷糊,可以看下面的補(bǔ)充說(shuō)明 ; 如果已經(jīng)了解,可以跳過(guò)下面一小節(jié)。

物理像素(physical pixel): 物理像素越大,屏幕越清晰。

設(shè)備獨(dú)立像素(density-independent pixel) : 也叫密度無(wú)關(guān)像素。這個(gè)設(shè)備獨(dú)立像素,就是你眼睛看到的手機(jī)大小有關(guān)。

2個(gè)手機(jī)看上去一樣大? 那他們?cè)O(shè)備獨(dú)立獨(dú)立像素就是一樣的。也就是說(shuō)我不管你高清屏還是什么**屏設(shè)備獨(dú)立像素只跟我這個(gè)設(shè)備看上去大不大有關(guān)。

設(shè)備看上去很大? 那設(shè)備獨(dú)立像素就大 ; 設(shè)備看上去很小? 那設(shè)備獨(dú)立像素就小

所以我覺(jué)得設(shè)備獨(dú)立像素(density-independent pixel)。這個(gè)翻譯比較貼切也好理解。只跟設(shè)備看上去的大小相關(guān)。

很多翻譯也管設(shè)備獨(dú)立像素叫做: 邏輯像素 、 css像素 、 實(shí)際像素...

首先，選取一款手機(jī)的屏幕寬高作為基準(zhǔn)(以前是iphone4的320×480，現(xiàn)在更多的是iphone6的375×667)。

對(duì)于retina屏幕(如: dpr=2)，為了達(dá)到高清效果，視覺(jué)稿的畫(huà)布大小會(huì)是基準(zhǔn)的2倍，也就是說(shuō)像素點(diǎn)個(gè)數(shù)是原來(lái)的4倍（對(duì)iphone6而言：原先的375×667，就會(huì)變成750×1334）。

rem方案的原理:

讓需要?jiǎng)討B(tài)變化的布局、圖片的單位都用rem來(lái)寫(xiě)。比如width: 2rem

那么2rem究竟表示多少呢? 這個(gè)和根元素html的font-size屬性相關(guān), 比如font-size為75px,那么 2rem 就表示150px

所以只要html的font-size可以根據(jù)屏幕的尺寸和dpr動(dòng)態(tài)的變化,那么所有以rem為單位的元素都會(huì)動(dòng)態(tài)變化。

這個(gè)就是rem能夠適配的基本原理。至于屏幕的尺寸和dpr都是可以通過(guò)js或者css獲取的。

常見(jiàn)的位圖,包括png / jpg / gif類型的圖片。只有一個(gè)位圖像素對(duì)應(yīng)一個(gè)物理像素時(shí),位圖才會(huì)被高質(zhì)量的顯示

所以常見(jiàn)的問(wèn)題就是: png圖片在普通屏幕上正常顯示,但是在高清屏上,會(huì)出現(xiàn)位圖像素不夠的情況,導(dǎo)致圖片模糊。

所以其實(shí)比較好的解決方案就是:

在根據(jù)不同的dpr,顯示不同的位圖。

另一個(gè)就是可以不用位圖,改用矢量圖、字體圖標(biāo)、轉(zhuǎn)成base64。不用位圖自然就沒(méi)有位圖的問(wèn)題了。

其實(shí)并不是所有做移動(dòng)端適配的人,都一定會(huì)遇到這個(gè)問(wèn)題。

比如你的設(shè)計(jì)師給了一張iphone6為基準(zhǔn)的 750*1334 的設(shè)計(jì)稿,里面有一個(gè)border標(biāo)注的是1px。

所以設(shè)計(jì)師實(shí)際上想要的是retina屏下的1px,也就是普通屏幕下的0.5px。

但問(wèn)題是: 并不是手機(jī)端屏幕都支持0.5px,ios7之下或者安卓機(jī)都可能把0.5解析成0px

這里給到一種解決方案: 設(shè)置initial-scale=0.5

這樣，頁(yè)面中的所有的border: 1px都將縮小0.5，從而達(dá)到border: 0.5px;的效果。

然而，頁(yè)面scale，必然會(huì)帶來(lái)一些問(wèn)題：

字體大小會(huì)被縮放

頁(yè)面布局會(huì)被縮放(如: div的寬高等)

rem原理: 根據(jù)手機(jī)的屏幕尺寸和dpr,動(dòng)態(tài)的修改html的font-size(基準(zhǔn)值)

求rem

    1 rem = document.documentElement.clientWidth * dpr / 10
    
   (1) 乘以dpr，是因?yàn)轫?yè)面有可能為了實(shí)現(xiàn)1px border頁(yè)面會(huì)縮放(scale) 1/dpr 倍(如果沒(méi)有，dpr=1),。
   (2) 除以10，是為了取整，方便計(jì)算(理論上可以是任何值)

求iphone6的1rem 例子:

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

知道1rem是多少后,如何寫(xiě)其他的css呢?

比如width: 150px, 我們就可以寫(xiě)成2rem

實(shí)際上,我們往往通過(guò)一個(gè)px2rem的函數(shù),來(lái)做轉(zhuǎn)換。算法就是 設(shè)計(jì)稿上某個(gè)div的寬度值 / 1rem的像素值, 例如 : 150px / 75px = 2rem

移動(dòng)端上,關(guān)于字體大小的需求,一般都是希望各個(gè)屏幕的字體都是保持一樣大的。

一般解決方案,就是根據(jù)dpr,設(shè)置不同的font-size,讓字體大小保持一致

再讀了很多文章后,覺(jué)得這篇文章講的最清楚,所以本文也算是對(duì)自己學(xué)習(xí)知識(shí)的一個(gè)整理。
http://www.html-js.com/articl...

關(guān)于viewport的講解很詳細(xì)
https://www.cnblogs.com/2050/...