分享一篇移動(dòng)端適配的多個(gè)方案，也可以說(shuō)說(shuō)你們是怎么做的。

概念

• 自適應(yīng)：根據(jù)不同的設(shè)備屏幕大小來(lái)自動(dòng)調(diào)整尺寸、大小
• 響應(yīng)式：會(huì)隨著屏幕的實(shí)時(shí)變動(dòng)而自動(dòng)調(diào)整，是一種更強(qiáng)的自適應(yīng)

為什么要做適配

市面上移動(dòng)端屏幕尺寸非常的繁多，很多時(shí)候我們希望一個(gè)元素在不同的屏幕上顯示不同的大小以此來(lái)更好的還原效果圖：

1.當(dāng)我們針對(duì)一個(gè)手機(jī)進(jìn)行布局設(shè)計(jì)時(shí)，設(shè)置了一個(gè) 300 * 200 大小的盒子
2.但在不同的設(shè)備上，由于邏輯像素不同的問(wèn)題，會(huì)使得這個(gè)盒子在更大的視口上顯得很小，在更小的視口上顯示很大
3.因此我們需要進(jìn)行適配讓它在不同設(shè)備上所占據(jù)視口的空間比例是相同的

當(dāng)前幾種適配方案

1.百分比設(shè)置（不推薦）

• 因?yàn)椴煌瑢傩缘陌俜直戎?，相?duì)的可能是不同參照物，所以百分比往往很難統(tǒng)一
• 百分比在移動(dòng)端適配中使用是比較少的

2.rem+html動(dòng)態(tài)的font-size

3.vw單位

4.flex的彈性布局

方案1：rem+html動(dòng)態(tài)的font-size

rem 單位是相對(duì)于 html 元素的 font-size 來(lái)設(shè)置的，通過(guò)在不同屏幕尺寸下，動(dòng)態(tài)的修改 html 元素的 font-size 以此來(lái)達(dá)到適配效果

在開發(fā)中，我們只需要考慮兩個(gè)問(wèn)題：

• 針對(duì)不同的屏幕，設(shè)置 html 不同的 font-size
• 將原來(lái)設(shè)置的尺寸，轉(zhuǎn)化成 rem 單位

font-size 的尺寸

px 與 rem 的單位換算

• 代碼換算

1.根據(jù) html 的寬度計(jì)算出 font-size 的大小，并設(shè)置到 html 上
2.監(jiān)聽頁(yè)面尺寸的變化，實(shí)時(shí)修改 font-size 大小
// 基準(zhǔn)大小
const baseSize = 375 / 10 // 375為UI提供的375尺寸，如果是750尺寸則設(shè)置為750
// 設(shè)置 rem 函數(shù)
function setRem () {
  // 當(dāng)前頁(yè)面寬度相對(duì)于 375(設(shè)計(jì)稿尺寸) 寬的縮放比例，可根據(jù)自己需要修改。
  const scale = document.documentElement.clientWidth / 375
  // 設(shè)置頁(yè)面根節(jié)點(diǎn)字體大小
  document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改變窗口大小時(shí)重新設(shè)置 rem
window.onresize = function () {
  setRem()
}

• 借助插件postcss-pxtorem （npm install postcss-pxtorem）

方案2：vw 適配方案

100vw 相當(dāng)于整個(gè)視口的寬度 innerWidth，1vw 相當(dāng)于視口寬度的 1%，將 px 轉(zhuǎn)換為 vw 即可完成適配，其實(shí)上面的 rem 就是模仿 vw 方案

vw相比于rem的優(yōu)勢(shì)：

• 不需要去計(jì)算 html 的 font-size 大小，也不需要去給 html 設(shè)置 font-size
• 不會(huì)因?yàn)樵O(shè)置 html 的 font-size 大小，而必須再給 body 設(shè)置一個(gè) font-size 防止繼承
• 因?yàn)椴灰蕾?font-size 的尺寸，所以不用擔(dān)心某些原因的 html 的 font-size 尺寸被篡改，導(dǎo)致頁(yè)面尺寸混亂
• vw 更加語(yǔ)義話，1vw 相當(dāng)于 1/100 viewport 的大小
• rem 事實(shí)上作為一種過(guò)渡的方案，它利用的也是 vw 的思想

px 與 vw 的單位轉(zhuǎn)換

• 代碼換算

比如屏幕尺寸為 375px，元素大小為 150px，我們需要將 150px 轉(zhuǎn)換成對(duì)應(yīng)的 vw 值：150 / 3.75=40
// less/scss 函數(shù)
@vwUnit: 3.75;
.pxToVw(@px) {
  result: (@px / @vw) * 1vw
}
.box {
  width: .pxToVw(100)[result];
  height: .pxToVw(100)[result];
} 

• 借助插件postcss-px-to-viewport-8-plugin （npm install postcss-px-to-viewport-8-plugin）