問題： 設計師給了一個適配iphone6 plus的設計圖。做好頁面之后適配iphone4、5、6很困難，這個間距調好了，那個又不好了。很糾結也很苦惱。最開始的辦法是用css3的media來查詢，然后設置相應的值。這樣的做法也不是很好。畢竟屏幕尺寸太多，根本適配不過來。有沒有一種方法可以隨著屏幕大小而變化呢？

帶著問題發現了很有用的一段回答，原文如下：

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

假設設計師的視覺稿是按照iPhone6的寬度來設計的，即375px (如果是高清的視覺稿750/2=375)

那么，我們可以完全按照視覺稿上的尺寸來賦值給元素的樣式，比如視覺稿上的尺寸是80px，那么在css中就可以直接定義width:80px;? 頁面中所有的尺寸都這樣來設置。

當所有的網站所有的頁面樣式都設置好之后。

我們需要做兩件事情：

1. 設置頁面的rem大小

```css

html {

font-size: calc(100vw/3.75); ?（vw是css3的一個單位，相對于視口的寬度，視口被均分為100單位的vw）

}

```

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

鏈接：https://www.zhihu.com/question/21504656/answer/48542422

來源：知乎

著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

于是，就嘗試了上面的方法根據rem的特性實現隨屏幕大小而變化的效果。暫時覺著這個辦法很好。