幾個(gè)概念：

設(shè)備獨(dú)立像素（dip）、設(shè)備像素比（dpr）、設(shè)備像素

設(shè)備像素： 即物理像素，指設(shè)備能控制顯示的最小單位，就是顯示屏上一個(gè)個(gè)的像素點(diǎn)。

設(shè)備獨(dú)立像素（dip）: 也稱為邏輯像素、密度獨(dú)立像素，指獨(dú)立于設(shè)備的用于邏輯上衡量像素的單位。 (重點(diǎn)：這個(gè)是我們?cè)陂_(kāi)發(fā)中使用的像素)

設(shè)備像素比（dpr）: 指的是物理像素與設(shè)備獨(dú)立像素的比例。

viewport: viewprot 指的是移動(dòng)設(shè)備瀏覽器中放置頁(yè)面的一個(gè)虛擬的窗口，該窗口可大于或小于移動(dòng)設(shè)備的可視區(qū)域。

一般移動(dòng)設(shè)備默認(rèn)都是 viewprot 大于其可視區(qū)域，這樣不會(huì)破壞沒(méi)有針對(duì)移動(dòng)設(shè)備優(yōu)化的網(wǎng)頁(yè)的布局，用戶可以通過(guò)平移和縮放來(lái)看網(wǎng)頁(yè)的其他部分，大部分移動(dòng)設(shè)備默認(rèn)的 viewport 為 980px（這里的 px 指的就是設(shè)備獨(dú)立像素）。

那么各個(gè)移動(dòng)設(shè)備的設(shè)備像素比是怎么得出來(lái)的呢？

一般來(lái)講，設(shè)備像素比是屏幕像素密度除以 160 的整數(shù)倍，即 :
dpr = Math.floor(dpi / 160) = Math.floor(√(縱向物理像素點(diǎn)數(shù)2+橫向物理像素點(diǎn)數(shù)2) / 屏幕尺寸 / 160)

舉例計(jì)算 設(shè)備像素比：

如 iphone 6 尺寸為 4.7 英寸，屏幕分辨率為 1334 * 750，那么我們可以得出 iphone 6 的

設(shè)備像素比為=Math.floor(√(13342+7502) / 4.7/160) = 2

移動(dòng)設(shè)備的相關(guān)設(shè)備獨(dú)立像素值(邏輯像素)？

設(shè)備獨(dú)立像素 = 物理像素 / 設(shè)備像素比

舉例計(jì)算 設(shè)備獨(dú)立像素 ：

如 iphone 6 的橫向分辨率是 750，設(shè)備像素比是 2，那么可以得出 iphone 6 的邏輯寬度（即以設(shè)備獨(dú)立像素來(lái)計(jì)算的移動(dòng)設(shè)備的寬度）是 375px 。

---

使用 px 像素單位時(shí)，同樣樣式的代碼在不同屏幕分辨率的移動(dòng)設(shè)備中顯示的情況基本一致（注意這里是基本一致而不是完全一致），是因?yàn)橐苿?dòng)設(shè)備中的設(shè)備像素比將設(shè)備獨(dú)立像素轉(zhuǎn)換了。

rem 是什么呢？

rem（font size of the root element），意思即根據(jù)根元素的 font-size 來(lái)設(shè)置字體的大小。跟 px 一樣，它是 CSS 中的一個(gè)樣式單位，會(huì)根據(jù)根元素的 font-size 值來(lái)轉(zhuǎn)換成 px 單位，公式為：
px = rem * html(font-size)

舉例：

html{font-size:10px; } div{width:2rem; // 2*10=20px }

實(shí)現(xiàn)移動(dòng)端適配的核心思想就是：

使用 rem 作為樣式單位，根據(jù)不同分辨率的移動(dòng)設(shè)備設(shè)置根元素的 font-size 值。

那么問(wèn)題來(lái)了，如何合理地設(shè)置根元素的 font-size 值呢？

以 iphone 6 的設(shè)計(jì)稿為基準(zhǔn)，即設(shè)計(jì)稿橫向分辨率為 750，取 100 為參照數(shù)（即在使用 rem 時(shí)與使用 px 時(shí)相差 100 的倍數(shù)），則我們可以知道 html 的寬度為 7.5rem（750 / 100），而我們知道 iphone 6 的邏輯寬度是 375px，所以 html 的寬度也為 375px，那么此時(shí) 7.5rem * html(font-size) = 375px，所以可以得出 html(font-size) = 375 / 7.5，即
html(font-size) = deviceWidth / 7.5。

通過(guò) js 來(lái)設(shè)置根元素的 font-size

var deviceWidth = document.documentElement.clientWidth; document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';

有一個(gè)前提，就是設(shè)置 viewprot 寬度為移動(dòng)設(shè)備的邏輯寬度

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

而當(dāng) deviceWidth 大于 750px 時(shí)，我們應(yīng)該去訪問(wèn)的是 pc 版的頁(yè)面，所以當(dāng) deviceWidth 大于 750px 時(shí)我們不應(yīng)該再改變根元素的 font-size 值，完整的代碼如下

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

而為了使我們?cè)跁?shū)寫樣式的時(shí)候跟設(shè)計(jì)稿的大小更加契合，可以通過(guò) sass 的 function 來(lái)設(shè)置一個(gè) px 與 rem 之間的轉(zhuǎn)換函數(shù)

@function pxToRem($num) {@return ($num/100) * 1rem; }

當(dāng)設(shè)計(jì)稿中有一個(gè)寬高都為 50px 的元素時(shí)，我們便可以如下寫樣式

div{width:pxToRem(50);height:pxToRem(50); }

注意點(diǎn)：

將 viewport 寬度設(shè)置為移動(dòng)設(shè)備邏輯寬度；

使用 js 根據(jù)不同分辨率的移動(dòng)設(shè)備來(lái)設(shè)置根元素的 font-size 值，注意移動(dòng)端與 pc 端的臨界值；

在樣式中字體使用 px 單位，而其它元素使用 rem 單位；

使用 sass 中的 function 來(lái)設(shè)置一個(gè) px 與 rem 之間的轉(zhuǎn)換函數(shù)；

總結(jié)

以上是生活随笔為你收集整理的移动端适配常用解决方案的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。