轉自知乎回答。
http://www.zhihu.com/question/21504656
在移動端可以做到適配不同的手機分辨率，如果保持整體縮放，沒有設計上的差異可以不需要用到`media query`
假設設計師的視覺稿是按照iPhone6的寬度來設計的，即375px (如果是高清的視覺稿750/2=375)
那么，我們可以完全按照視覺稿上的尺寸來賦值給元素的樣式，比如視覺稿上的尺寸是80px，那么在css中就可以直接定義width:80px; 頁面中所有的尺寸都這樣來設置。
當所有的網站所有的頁面樣式都設置好之后。
我們需要做兩件事情：
1. 設置頁面的rem大小
```css
```
100vw是設備的寬度，除以3.75可以讓1rem的大小在iPhone6下等於100px
2. 替換頁面中的單位，把所有的px單位替換成rem，除以100，比如前面的80px，就是0.8rem
這樣在iPhone6下，所有元素的尺寸還是和視覺稿的尺寸一樣，而iphone5中，因為設備的寬度變小了，100vw/3.75得到的值，會相應的變小，即rem的單位值會變小，頁面中所有的尺寸會等比例縮放。
這樣就可以做到針對任何分辨率的設備保持視覺一致了。
最后，前面用到vw單位，但是低版本的設備可能不支持，那么就需要js來處理一下：
```javascript
```
之所以前面讓1rem等於100px，而不是1rem等於1px，是因為在chrome下針對中文的最小字體是12px。
當然，這種步驟是針對現在的狀況改rem來做的，如果一開始就是使用rem，那么寫css的時候，可以直接寫rem單位，按視覺稿除以100，其實也沒有什么計算過程。或者用預處理器的話，也可以寫一個`px2rem`的函數，直接改這個函數就可以了。
假設設計師的視覺稿是按照iPhone6的寬度來設計的，即375px (如果是高清的視覺稿750/2=375)
那么，我們可以完全按照視覺稿上的尺寸來賦值給元素的樣式，比如視覺稿上的尺寸是80px，那么在css中就可以直接定義width:80px; 頁面中所有的尺寸都這樣來設置。
當所有的網站所有的頁面樣式都設置好之后。
我們需要做兩件事情：
1. 設置頁面的rem大小
```css
html {
font-size: calc(100vw/3.75);
}
750的設計稿
把font-size: calc(100vw/3.75)中的3.75改成7.5即可
100vw是設備的寬度，除以3.75可以讓1rem的大小在iPhone6下等於100px
2. 替換頁面中的單位，把所有的px單位替換成rem，除以100，比如前面的80px，就是0.8rem
這樣在iPhone6下，所有元素的尺寸還是和視覺稿的尺寸一樣，而iphone5中，因為設備的寬度變小了，100vw/3.75得到的值，會相應的變小，即rem的單位值會變小，頁面中所有的尺寸會等比例縮放。
這樣就可以做到針對任何分辨率的設備保持視覺一致了。
最后，前面用到vw單位，但是低版本的設備可能不支持，那么就需要js來處理一下：
```javascript
document.documentElement.style.fontSize = window.innerWidth/3.75 + 'px'
之所以前面讓1rem等於100px，而不是1rem等於1px，是因為在chrome下針對中文的最小字體是12px。
當然，這種步驟是針對現在的狀況改rem來做的，如果一開始就是使用rem，那么寫css的時候，可以直接寫rem單位，按視覺稿除以100，其實也沒有什么計算過程。或者用預處理器的話，也可以寫一個`px2rem`的函數，直接改這個函數就可以了。
作者：sapjax
鏈接：http://www.zhihu.com/question/21504656/answer/48542422
來源：知乎
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。