移動(dòng)端頁(yè)面開發(fā)適配 rem布局原理

什么是適配，為什么要適配

我們拿到的設(shè)計(jì)圖一般是以640，750，1080分辨率為基準(zhǔn)設(shè)計(jì)的，而現(xiàn)在的手機(jī)終端各式各樣，分辨率不同，邏輯像素不同 ，視口不同，所以為了讓我們的頁(yè)面在每個(gè)設(shè)備上都可以良好的展示，那么就需要為這些設(shè)備做統(tǒng)一的處理，這個(gè)過程就稱為移動(dòng)端適配。

需要知道的一些概念：

物理像素(physical pixel)

一個(gè)物理像素是顯示器(手機(jī)屏幕)上最小的物理顯示單元，可以理解為我們平時(shí)說的分辨率。

設(shè)備獨(dú)立像素(density-independent pixel)

設(shè)備獨(dú)立像素(也叫密度無關(guān)像素)，可以認(rèn)為是計(jì)算機(jī)坐標(biāo)系統(tǒng)中得一個(gè)點(diǎn)，這個(gè)點(diǎn)代表一個(gè)可以由程序使用的虛擬像素(比如: css像素)，然后由相關(guān)系統(tǒng)轉(zhuǎn)換為物理像素，在這里可以理解為我們說的視覺視口的大小；

所以說，物理像素和設(shè)備獨(dú)立像素之間存在著一定的對(duì)應(yīng)關(guān)系，這就是接下來要說的設(shè)備像素比。

設(shè)備像素比(device pixel ratio)

設(shè)備像素比(簡(jiǎn)稱dpr)定義了物理像素和設(shè)備獨(dú)立像素的對(duì)應(yīng)關(guān)系，它的值可以按如下的公式的得到：設(shè)備像素比 = 物理像素 / 設(shè)備獨(dú)立像素 // 在某一方向上，x方向或者y方向

設(shè)備像素比也是設(shè)備生產(chǎn)的時(shí)候設(shè)置好的，在javascript中，可以通window.devicePixelRatio獲取到當(dāng)前設(shè)備的dpr。

視口（viewport）

pc端視口指瀏覽器窗口內(nèi)的內(nèi)容區(qū)域，不包含工具條，滾動(dòng)條.

移動(dòng)瀏覽器中視口分為幾種情況:

<metaname="viewport"content=“width=device-width,minimum-scale=1.0,maximum-scale=1.0”/>中content所設(shè)置的視口，稱為布局視口，最大值由瀏覽器廠商規(guī)定 ,可以document.documentElement.clientWidth獲取其寬度.

而我們看到的瀏覽器的窗口，網(wǎng)頁(yè)區(qū)域的大小，稱為視覺視口，用css像素表示（設(shè)備邏輯像素）

rem

rem是css3 的一個(gè)長(zhǎng)度單位 ，相對(duì)文檔跟元素 html；比如設(shè)置html font-size=100px;那么1rem=100px;之后的所有元素都可以用這個(gè)基準(zhǔn)值來設(shè)置大??；

常用的方案：

固定高度，寬度自適應(yīng)（百分比，em）

使用 rem布局

下面總結(jié)了網(wǎng)易 淘寶首頁(yè)使用rem的方案

網(wǎng)易的做法：

1) 將布局適口設(shè)置為視覺視口，不進(jìn)行縮放，即理想視口。

<meta name="viewport"content="initial-scale=1,maximum-scale=1, minimum-scale=1”>

2) 以設(shè)計(jì)稿分辨率為基準(zhǔn)，取100px為font-size的參照，那么設(shè)計(jì)稿的寬如果是640，body元素的寬度就可以設(shè)置為width:6.4rem（640/100），當(dāng)我們將布局視口設(shè)置為320時(shí)，于是html的font-size=deviceWidth / 6.4。

3) 通過document.documentElement.clientWidth獲取deviceWidth；

4) 當(dāng)頁(yè)面的dom ready后設(shè)置html font-size,

document.documentElement.style.fontSize =document.documentElement.clientWidth / 6.4 + ‘px’

5) 通過mediaQuery 設(shè)置字體大小，字體大小不可以使用rem,原因是誤差太大。

以640的設(shè)計(jì)稿為例最終的設(shè)置html font-size代碼如下，布局時(shí)拿設(shè)計(jì)稿標(biāo)注的尺寸除以100，就是rem的值，相當(dāng)簡(jiǎn)單啊

var deviceWidth = document.documentElement.clientWidth;
if(deviceWidth > 640) deviceWidth = 640;
document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px';

這里if(deviceWidth > 640) deviceWidth = 640; 是因?yàn)楫?dāng)deviceWidth大于640時(shí)物理分辨率已經(jīng)大于1280（取決于dpr），應(yīng)該去訪問pc的網(wǎng)站；

淘寶的做法：

原理

1) 通過dpr設(shè)置縮放比，實(shí)現(xiàn)布局視口大小，

var scale = 1 / devicePixelRatio; 
 document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale='+ scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

2) 動(dòng)態(tài)計(jì)算html的font-size

document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + ‘px’；

這里的意思是，clientWidth / 10 得到是布局視口下的rem基準(zhǔn)值（以iphone6為例 1rem＝75px），那么設(shè)計(jì)稿正好也是 750，所以對(duì)應(yīng)的關(guān)系 clientWidth / 10＝＝設(shè)計(jì)稿的尺寸/x, 那么x=設(shè)計(jì)稿的尺寸/rem基準(zhǔn)值。如果是iphone6 plus rem基準(zhǔn)值等于clientWidth / 10 等于124.2，那么x＝750/124.2。

關(guān)于具體的實(shí)現(xiàn) 淘寶提供了一個(gè)開源的方案lib-flexible：https://github.com/amfe/lib-flexible

具體邏輯 ：

1）判斷head中是否設(shè)置了viewport，如果有設(shè)置，按照已有viewport 設(shè)置縮放比；

if (metaEl) {
 console.warn('將根據(jù)已有的meta標(biāo)簽來設(shè)置縮放比例');
 var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
 if (match) {
 scale = parseFloat(match[1]);
 dpr = parseInt(1 / scale);
 }
 }

2）如果沒有設(shè)置meta viewport，判斷是否設(shè)置dpr，如果有，通過dpr計(jì)算縮放scale。

 var content = flexibleEl.getAttribute('content');
 if (content) {
 var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
 var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);//maximum 設(shè)置最大值，與initial的值比較，取最小值；
 if (initialDpr) {
 dpr = parseFloat(initialDpr[1]);
 scale = parseFloat((1 / dpr).toFixed(2)); 
 }
 if (maximumDpr) {
 dpr = parseFloat(maximumDpr[1]);
 scale = parseFloat((1 / dpr).toFixed(2)); 
 }
 }

3）如果 dpr &scale都沒有設(shè)置，那么就通過設(shè)備的dpr設(shè)置起縮放 scale，

if (!dpr && !scale) {//meta[name="viewport"]&&meta[name="flexible"]都不存在。
 var isAndroid = win.navigator.appVersion.match(/android/gi);
 var isIPhone = win.navigator.appVersion.match(/iphone/gi);
 var devicePixelRatio = win.devicePixelRatio;
 if (isIPhone) {
 // iOS下，對(duì)于2和3的屏，用2倍的方案，其余的用1倍方案
 if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) { 
 dpr = 3;
 } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
 dpr = 2;
 } else {
 dpr = 1;
 }
 } else {
 // 其他設(shè)備下，仍舊使用1倍的方案
 dpr = 1;
 }
 scale = 1 / dpr;
}

4）得到scale之后 ，如果meta 的viewport不存在，那么就創(chuàng)建一meta[name=“viewport”],將scale配置進(jìn)去。

 metaEl = doc.createElement('meta');
 metaEl.setAttribute('name', 'viewport');
 metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

 if (docEl.firstElementChild) {

 docEl.firstElementChild.appendChild(metaEl);
 
 }

5）動(dòng)態(tài)改寫html的font-size

 var width = docEl.getBoundingClientRect().width;//獲取html的寬度
 if (width / dpr > 540) {//判斷屏幕邏輯像素大于540時(shí)，取540
 width = 540 * dpr;
 }
 var rem = width / 10;
 docEl.style.fontSize = rem + 'px';
 flexible.rem = win.rem = rem;

總結(jié)：

使用rem布局，實(shí)質(zhì)都是通過動(dòng)態(tài)改寫html的font-size基準(zhǔn)值，來實(shí)現(xiàn)不同設(shè)備下的良好統(tǒng)一適配；

網(wǎng)易與淘寶不同 的地方是 ，網(wǎng)易將布局視口設(shè)置成了 視覺視口，淘寶將布局視口設(shè)置成了物理像素大小，通過 scale縮放嵌入了 視覺視口中；

容器元素的字體大小都不使用rem，需要額外的media查詢；

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com