面試官 | 說說移動端專案適配
阿新 • • 發佈：2020-05-24
## 前置
希望通過這篇文章幫助你很好的適配移動端專案，如有不足，懇請指點一二！
## 單位
- 解析度: 單位面積顯示畫素的數量，和 css 無關
- DPI：影象每英寸長度內的畫素點數（1 英尺=30.48 釐米）
- css 的 px: 96 DPI 的單畫素的物理大小
- 物理畫素：在由一個數字序列表示的影象中的一個最小單位
- dpr: 一個 CSS 畫素的大小相對於一個物理畫素的大小的比值
- rem: 1rem = 根元素的字型大小 \* 1
《css 權威指南》對於 css 畫素的解釋：
## 基準值
```css
html {
font-size: 12px;
}
div {
width: 2rem;
}
```
這裡根元素的字型大小 12px，稱之為**基準值**。這時 div 的 width 為 `2rem = 12px\*2 = 24px`. 通常設計稿都以 px 為單位，如果一個塊的高度為 50px，轉換為 rem 非常簡單，即 `50px/12px rem`。如果在不同螢幕下設定不同基準值，就能實現簡單的伸縮適配的目的了。
## 設計搞
移動端設計稿通常以 iphone6 螢幕為基準。iphone6 螢幕寬度為 375px，在進行適配時通常以 37.5px 為**基準值**，為什麼不直接以 375px 為基準值呢？因為這個值太大了，所以除以 10。為什麼要以螢幕寬度為基準值呢？為了方便適配，在 iphone4/5 下以 `320px / 10 = 32px` 作為基準值就好了，其他裝置類比。
## 如何做
在不同螢幕下設定不同基準值，就能實現縮放適配的目的。以下幾種方法都能實現。
- 利用 css 媒體查詢（Media Queries）
```css
@media (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {
html {
font-size: 37.5px;
}
}
/* ... */
```
- 利用簡易的 JavaScript
```js
document.getElementsByTagName('html')[0].style.fontSize = window.innerWidth / 10 + 'px'
```
- 使用 flexible.js，這是當前常用的方式
## flexible
### amfe-flexible
1.使用
- [下載 js 檔案](https://github.com/amfe/lib-flexible?utm_source=caibaojian.com)通過內聯的方式引入
- 使用 npm `npm i amfe-flexible`
2.如果使用 webpack 構建專案，使用 [px2rem-loader](https://www.npmjs.com/package/px2rem-loader)。這樣設計稿上元素是多少 px 就寫多少 px 。注意：要將基準值設定為 37.5 的二倍 75，因為設計稿的寬度一般是 iphone6 寬度的二倍。loader 配置：
```js
{
loader: 'px2rem-loader',
options: {
remUni: 75,
remPrecision: 8
}
}
```
如果直接引入的 js，可以使用 vscode 擴充套件 [px2rem](https://marketplace.visualstudio.com/items?itemName=arturiapendragon.px2rem)，同樣你需要開啟 vscode settings 並設定基準值。書寫時設計稿上元素是多少 px 就寫多少 px，外掛會幫你在書寫時自動轉換成對應的 rem。
```js
"px2rem.rootFontSize": 75,
"px2rem.fixedDigits": 6,
```