我們知道，當使用rem佈局，並配合JS動態按照比例設置HTML標籤上的rem值時，整個頁面是按照屏幕的寬度來整體縮放的。
對於高度不限制的頁面（也就是超出一屏頁面可以滾動），這種方案沒有任何問題，簡單暴力。
但是對於一些需要佈滿一整屏的頁面（比如現在流行的上下/左右滑動的那種），由於一個頁面的元素必須在一個頁面內佈滿，不能超出，那麼問題就來了：
如果你是按照iPhone5的尺寸來做的頁面，尺寸是320*568，那麼當頁面放在寬度較寬，或高度較矮的手機裏（寬高比變大），必定會出現頁面元素在一屏放不下的情況（對於上下絕對定位，中間拉伸的頁面，就會是擠做一堆）。
可以看下面這個例子，這個頁面上面部分是從上往下佈局，下面按鈕採用bottom絕對定位。
頁面是按照標準iphone5尺寸開發的，但是在帶有導航條的iphone4下，高度只有411px，由於iphone4/5都是320px的寬，就會發生頁面擠作一堆的情況。
圖1 同一頁面在標準iphone5下與帶導航條的iphone4下
那麼怎麼辦呢？首先我想到的當時是media query。最開始我想當然的使用max-height/min-height來控制樣式，但很快我發現我太單純了...
因爲頁面是整體根據寬度縮放的，不同的寬度下的設備，對應的就是不同的高度比例！在我寫了若干套max-height/min-height，還會冒出各種各樣奇葩分辨率後，我發現這不是辦法。
既然我們的頁面是根據寬度進行等比縮放的，那麼如果能判斷寬高比就好了，一頓查閱文檔，讓我找到了aspect-ratio這個屬性，正是我要的！
下面是MDN上關於aspect-ratio的介紹:
寬高比（aspect-ratio）
值：
<ratio>媒體：
visual,tactile是否接受 min/max 前綴：是
描述了輸出設備目標顯示區域的寬高比。該值包含兩個以“/”分隔的正整數。代表了水平像素數（第一個值）與垂直像素數（第二個值）的比例。
Ok，有了它以後，事情就變得簡單了。
先按照正常iphone5尺寸（320px * 568px）進行頁面開發，最後適配時，不需要改變寬度（因爲我們適配的是寬高比，而高度是自動根據寬度縮放的），直接調整高度。
對於上面那個例子，我當時是將頁面劃分爲了幾個高度區域（單位都是px）：
- 568 ~ 510
- 510 ~ 490
- 490 ~ 470
- 470 - 440
- 440以下
（爲什麼對568以上的尺寸不做調整？因爲我們的頁面是根據寬度縮放的，我們只怕高度小，而不怕高度過大）
然後開始寫media query。下面以568~510區間爲例，看看具體media query : aspect-ratio怎麼寫。
（需要注意的是，aspect-ratio是寬度/高度，而我們關注的是高度，必須要小心高度是分母，對於max-aspect-ratio/min-aspect-ratio不要搞反了，一開始調研的時候我就因爲寫反了，以爲這個屬性不好使...）
@media screen and (max-aspect-ratio: 320/510) and (min-aspect-ratio: 320/568), screen and (-webkit-max-aspect-ratio: 320/510) and (-webkit-min-aspect-ratio: 320/568) {
// 這裏面的樣式僅會對320/510 ~ 320/568寬高比之間的設備生效
}
匹配到樣式區間了，那麼如何適配？這個嘛，就隨意了，只要調整到在這個高度範圍內顯示正常，那就ok了。
比較簡單暴力的，就是直接對主要頁面區域施加 transform: scale(0.8) 這類樣式，直接縮小。
至於怎麼劃分區間，這個要根據具體的頁面佈局情況、或者具體你們需要適配的幾大機型的寬高比範圍來決定，這裏並沒有一個統一的規定。
總結
rem是個好東西，關於怎麼使用它最愉快，我也還在探索中。在這裏配合aspect-ratio使用，對於簡單的需要鋪滿整屏的移動端頁面，個人目前覺得這是成本最低、最省事、也是最暴力、最徹底的一種方案。
關於rem以及media query: aspect-ratio的兼容性，個人測試是兼容安卓2.3+（加上-webkit-aspect-ratio前綴爲了保險起見），並且已經過生產環境上的線上項目校驗，兼容性可靠。
關於上面的例子，項目還在線上，有興趣的同學可以點開看看（Chrome手機模擬或者直接用手機開打哦~）線上鏈接，並且試着改變不同的寬度、高度來查看效果。