移動(dòng)端h5頁面適配

張率功發(fā)布于2019-08-22 18:18 / 1262人閱讀

摘要：一直對(duì)頁面充滿崇敬揣著忐忑的心開始了我的之旅。但實(shí)際情況卻并非如此理由如上但在移動(dòng)設(shè)備上，必須弄明白這點(diǎn)。其他品牌的移動(dòng)設(shè)備也是這個(gè)道理。

一直對(duì)h5頁面充滿崇敬,揣著忐忑的心開始了我的h5之旅。才發(fā)現(xiàn)直接照抄網(wǎng)上的方案是很容易,但是想真的了解內(nèi)部的原理,這就給我了一個(gè)下馬威了.通過在網(wǎng)上各種找資料,才將各種概念以及原理了解清楚.故寫下這篇文章用于積累知識(shí),如有問題,歡迎指正!

在開始做手機(jī)端適配的時(shí)候我們需要去了解一些概念 1.設(shè)備像素

先來看看很多資料上面的描述

它是物理概念，指的是設(shè)備中使用的物理像素(Physic pixel)。這個(gè)單位用px表示，它是一個(gè)[相對(duì)絕對(duì)單位]———— 即在同樣一個(gè)設(shè)備上，每1個(gè)設(shè)備像素所代表的物理長度(如英寸)是固定不變的(即設(shè)備像素的絕對(duì)性); 但在不同的設(shè)備之間，每1個(gè)設(shè)備像素所代表的物理長度(如英寸)是可以變化的(即設(shè)備像素的相對(duì)性);

總結(jié)的說: 就是像素就相當(dāng)于我們?nèi)粘Ｋf的的厘米(cm)、米(m)、克(g)這些度量單位,但稍微有些不同的是它是個(gè)相對(duì)單位,對(duì)于不同的設(shè)備中它對(duì)應(yīng)的英寸數(shù)是不一樣的.設(shè)備像素就是這個(gè)設(shè)備上總共有多少個(gè)這樣的單位像素

2.css中的px 等同于設(shè)備獨(dú)立像素

這個(gè)也是一個(gè)相對(duì)單位,所以它在一個(gè)設(shè)備中具體表現(xiàn)為多少英尺不確定,除受到設(shè)備寬度影響外還有以下兩點(diǎn)可以影響它。

1、屏幕布局視口大小
2、屏幕的分辨率

由上概念我們知道 1設(shè)備像素 ≠ 1css像素

那為什么我們以前在做web端網(wǎng)頁的時(shí)候沒有考慮過這個(gè)問題呢?

在桌面瀏覽器中css的1個(gè)像素往往都是對(duì)應(yīng)著電腦屏幕的1個(gè)物理像素，這可能會(huì)造成我們的一個(gè)錯(cuò)覺，那就是css中的像素就是設(shè)備的物理像素。但實(shí)際情況卻并非如此(理由如上),但在移動(dòng)設(shè)備上，必須弄明白這點(diǎn)。在早先的移動(dòng)設(shè)備中，屏幕像素密度都比較低，如iphone3，它的分辨率為320x480，在iphone3上，一個(gè)css像素確實(shí)是等于一個(gè)屏幕物理像素的。后來隨著技術(shù)的發(fā)展，移動(dòng)設(shè)備的屏幕像素密度越來越高，從iphone4開始,蘋果公司便推出了所謂的Retina屏，分辨率提高了一倍，變成640x960，但屏幕尺寸卻沒變化，這就意味著同樣大小的屏幕上，像素卻多了一倍，這時(shí)，一個(gè)css像素是等于兩個(gè)物理像素的。其他品牌的移動(dòng)設(shè)備也是這個(gè)道理。例如安卓設(shè)備根據(jù)屏幕像素密度可分為ldpi、mdpi、hdpi、xhdpi等不同的等級(jí)，分辨率也是五花八門，安卓設(shè)備上的一個(gè)css像素相當(dāng)于多少個(gè)屏幕物理像素，也因設(shè)備的不同而不同，沒有一個(gè)定論。

這兩個(gè)概念不同對(duì)我們在開發(fā)h5頁面產(chǎn)生什么樣的影響呢,哈哈,應(yīng)該你會(huì)說這不廢話嗎,當(dāng)然是不能夠?qū)⒃O(shè)計(jì)師的設(shè)計(jì)稿百分百的還原到手機(jī)上,嗯,是的你說的沒錯(cuò),那怎樣才能做到百分百的還原呢?這里面先買個(gè)關(guān)子,后面我們慢慢來分析.

3.設(shè)備分辨率(設(shè)備分辨率的單位就是上面所說的設(shè)備像素)

先來一張圖

分辨率這個(gè)概念相信大家接觸的都不少,我們都知道同種寬高屏幕下分辨率越高屏幕的清晰度也就越高.為什么這樣呢?因?yàn)樵O(shè)備像素就是屏幕中一個(gè)個(gè)的點(diǎn),設(shè)備分辨率就是橫向點(diǎn)的個(gè)數(shù) * 縱向點(diǎn)的個(gè)數(shù), 這一個(gè)點(diǎn)就是一個(gè)一個(gè)的馬賽克色塊,同物理寬度的范圍內(nèi)這種馬賽克色塊越多顯然我們看到的顏色也就越清晰.

設(shè)備分辨率在設(shè)備出廠時(shí)就已經(jīng)定了,并不能更改了.讀到這可能有人就有疑惑了,我們在用電腦的時(shí)候可都是可以調(diào)節(jié)分辨率的

電腦上面調(diào)整分辨率的時(shí)候,其實(shí)我怎么調(diào)它的像素點(diǎn)數(shù)還是那么多的.不信你看電腦,人家系統(tǒng)給你推薦的是1366px  768px的分辨率,你知道意味著什么嗎？沒錯(cuò)，微軟在這塊屏幕上橫向設(shè)置了768個(gè)像素，豎向設(shè)置1366個(gè)像素。再怎么拉扯，這個(gè)數(shù)字是不會(huì)變了。那么，為啥我還能調(diào)整分辨率呢？我要是調(diào)整到800px  600px，按照定義，橫向就是60個(gè)像素，豎向就是800個(gè)像素了啊。其實(shí)呢，你把分辨率調(diào)800  600,系統(tǒng)就會(huì)分配給你800  600個(gè)有效像素個(gè)數(shù)，也就是真實(shí)的色彩塊。其他的個(gè)數(shù)呢，就由系統(tǒng)自作主張，通過一系列運(yùn)算給你一個(gè)模擬色彩塊，填充成正好1366*768個(gè)色彩塊。這些拿來充數(shù)的像素塊，和真實(shí)的像素塊放到一起。就好比一個(gè)正規(guī)軍，里面摻了很多雜牌軍一樣，只能是隊(duì)伍不好帶了

4.屏幕像素密度(PPI,每英尺展示的像素塊數(shù))

計(jì)算公式 PPI = 屏幕對(duì)角線的像素?cái)?shù)/屏幕對(duì)角線的長度。
由此我們可以知道PPI越大屏幕的清晰度越高

5.視口viewport

布局視口,布局視口是看不見的，瀏覽器廠商設(shè)置的一個(gè)固定值，一般是768px~1024px之間。這里我們可以認(rèn)為它是一個(gè)畫板用于展示網(wǎng)頁。

視覺視口,瀏覽器可視區(qū)域的大小，即用戶看到的網(wǎng)頁的區(qū)域,繼承布局視口的寬度,所以我們在一個(gè)布局視口為980px的瀏覽器上一行上是可以放980px(css像素)內(nèi)容的.

理想視口,它對(duì)設(shè)備來說是最理想的布局視口，用戶不需要對(duì)頁面進(jìn)行縮放就能完美的顯示整個(gè)頁面。這個(gè)理想的寬度是指以CSS像素單位計(jì)算的寬度，即屏幕的邏輯像素寬度，跟設(shè)備的物理寬度沒有關(guān)系。在css中，這個(gè)寬度就相當(dāng)于100%的所代表的那個(gè)寬度。

6.那我們該怎么做才能百分百的還原網(wǎng)頁呢?

首先我們先想想上面這些所帶來的影響:

1px 的css像素不代表1設(shè)備像素了,這樣在dpr>1的時(shí)候,我們會(huì)明顯的發(fā)現(xiàn)我們設(shè)置的1px像素的東西明顯的看著粗一些

頁面無法相對(duì)于設(shè)計(jì)稿等比例的縮放

我們的目的是將1設(shè)備像素等于1css像素,鑒于這個(gè)目的我們說說我的方案.具體代碼可看我寫的demo
根據(jù)不同屏幕來動(dòng)態(tài)寫入font-size和改變布局視口，并以rem作為寬度單位

1.使用meta標(biāo)簽對(duì)viewport進(jìn)行設(shè)置達(dá)到1css像素等于1個(gè)設(shè)備像素以dpr為2為例即

解釋: 首先我們要知道如果不設(shè)置meta viewport標(biāo)簽，那么移動(dòng)設(shè)備上瀏覽器默認(rèn)的layout viewport寬度值為980px，1024px等這些,所以第一步我們先將視口寬度設(shè)置和布局寬度一樣即在html頭部設(shè)置（這個(gè)時(shí)候我們不做下一步的操作也能做到自適應(yīng)網(wǎng)頁，但有1px的問題存在，我們可以通過接下來的這一步來解決這個(gè)問題）。然后通過js來獲取不同的dpr獲取scale=1/dpr來設(shè)置這樣設(shè)置就可以解決1px的問題了

2.將屏幕分為固定的塊數(shù)10：作為1rem所代表的px值 ,并給html設(shè)置font-size為這個(gè)值

注:屏幕即布局視口可通過document.documentElement.clientWidth獲得.這里將屏幕分成10等份,當(dāng)然你也可以分成其他等份,不過最好是10的倍數(shù),這樣我們算出的rem小數(shù)點(diǎn)也會(huì)少些,這樣還原度也會(huì)高些)`

這樣在任何屏幕下，總長度都為10rem。1rem對(duì)應(yīng)的值也不固定，與屏幕的布局視口寬度有關(guān)。

3.量取psd獲得px值并除于1個(gè)rem代表的px數(shù)獲得對(duì)應(yīng)rem值,這個(gè)轉(zhuǎn)化有多種方式我主要用過以下兩種方式

使用sublime text中的插件來實(shí)現(xiàn)轉(zhuǎn)換,具體怎么做可參照這個(gè)
使用postcss的插件postcss-pxtorem,具體可參照

關(guān)于文字 : 我這邊用的方案中字體大小也是使用rem，也就意味著我們的段落文字隨著屏幕增大，等比例縮放，這樣一行所展示的文字個(gè)數(shù)也一樣。這只是其中的一個(gè)方案，還有一種文字不使用rem作為單位，這樣就需要針對(duì)字體做特殊的處理，使用一些預(yù)處理或者后處理的方式，針對(duì)dpr不同計(jì)算出不同dpr下文字對(duì)應(yīng)的大小，這種方案可參考中有說明;

總結(jié)

哈哈,終于將這篇文章寫完了,總結(jié)一哈