關於rem布局

我們知道，當使用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）

值：

**：visual,tactile

是否接受 min/max 字首：是

描述了輸出裝置目標顯示區域的寬高比。該值包含兩個以「/」分隔的正整數。代表了水平畫素數（第乙個值）與垂直畫素數（第二個值）的比例。

先按照正常iphone5尺寸（320px * 568px）進行頁面開發，最後適配時，不需要改變寬度（因為我們適配的是寬高比，而高度是自動根據寬度縮放的），直接調整高度。

對於上面那個例子，我當時是將頁面劃分為了幾個高度區域（單位都是px）：

（為什麼對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)

比較簡單暴力的，就是直接對主要頁面區域施加transform: scale(0.8)這類樣式，直接縮小。

至於怎麼劃分區間，這個要根據具體的頁面布局情況、或者具體你們需要適配的幾大機型的寬高比範圍來決定，這裡並沒有乙個統一的規定。

rem是個好東西，關於怎麼使用它最愉快，我也還在探索中。在這裡配合aspect-ratio使用，對於簡單的需要鋪滿整屏的移動端頁面，個人目前覺得這是成本最低、最省事、也是最暴力、最徹底的一種方案。

關於rem以及media query: aspect-ratio的相容性，個人測試是相容安卓2.3+（加上-webkit-aspect-ratio字首為了保險起見），並且已經過生產環境上的線上專案校驗，相容性可靠。

關於rem布局摘錄

一般情況下使用em或者rem的時候，會寫個樣式 html,body html，這樣設定方便了em rem與px相互轉換，因為瀏覽器預設字型大小16px，所以em的初始值為1em 16px。當設定了body時，1em則 16px 62.5 10px。但是由於谷歌不相容，所以我個人習慣使用 html。目...

關於rem布局的理解

將頁面的 設計稿等比例的進行縮放 首先是計算視覺稿到頁面的比例 假設這個比例是a a 視覺稿的寬度 頁面的寬度 document.documentelement.clientwidth 根據這個比率去計算 螢幕上應該顯示的寬度 假設這個值是 b b 量取的寬度 a 現在我們獲取了元素在螢幕上顯示的乙...

關於rem 布局的理解

頁面中使用的rem單位是相對於 html 這個根節點的作為參考，預設的情況下html的字型大小16x,在什麼也不做處理的情況下，頁面中如果使用了rem，那麼這時候的1rem表示的就是1 16 16px 2rem表示的就是32px的大小 在寫手機端頁面時封裝的rem自適應js檔案如下 這個js裡面設定...