abstract：在移動端可以做到適配不同的手機分辨率，如果保持整體縮放，沒有設(shè)計上的差異可以不需要用到`media query`假設(shè)設(shè)計師的視覺稿是按照iPhone6的寬度來設(shè)計的，即375px (如果是高清的視覺稿750/2=375)那么，我們可以完全按照視覺稿上的尺寸來賦值給元素的樣式，比如視覺稿上的尺寸是80px，那么在css中就可以直接定義width:80px;  頁面中所有的尺寸都這樣來設(shè)置。

在移動端可以做到適配不同的手機分辨率，如果保持整體縮放，沒有設(shè)計上的差異可以不需要用到`media query`

假設(shè)設(shè)計師的視覺稿是按照iPhone6的寬度來設(shè)計的，即375px (如果是高清的視覺稿750/2=375)
那么，我們可以完全按照視覺稿上的尺寸來賦值給元素的樣式，比如視覺稿上的尺寸是80px，那么在css中就可以直接定義width:80px;  頁面中所有的尺寸都這樣來設(shè)置。

當所有的網(wǎng)站所有的頁面樣式都設(shè)置好之后。

我們需要做兩件事情：
1. 設(shè)置頁面的rem大小
```css

html {
font-size: calc(100vw/3.75);
}

```
100vw是設(shè)備的寬度，除以3.75可以讓1rem的大小在iPhone6下等于100px

2. 替換頁面中的單位，把所有的px單位替換成rem，除以100，比如前面的80px，就是0.8rem
這樣在iPhone6下，所有元素的尺寸還是和視覺稿的尺寸一樣，而iphone5中，因為設(shè)備的寬度變小了，100vw/3.75得到的值，會相應(yīng)的變小，即rem的單位值會變小，頁面中所有的尺寸會等比例縮放。

這樣就可以做到針對任何分辨率的設(shè)備保持視覺一致了。
最后，前面用到vw單位，但是低版本的設(shè)備可能不支持，那么就需要js來處理一下：
```javascript

document.documentElement.style.fontSize = window.innerWidth/3.75 + 'px'

```

之所以前面讓1rem等于100px，而不是1rem等于1px，是因為在chrome下針對中文的最小字體是12px。


當然，這種步驟是針對現(xiàn)在的狀況改rem來做的，如果一開始就是使用rem，那么寫css的時候，可以直接寫rem單位，按視覺稿除以100，其實也沒有什么計算過程?；蛘哂妙A(yù)處理器的話，也可以寫一個`px2rem`的函數(shù)，直接改這個函數(shù)就可以了。