常用移動布局方法

1. 百分比布局

• 特點：所有的元素都根據(jù)其占父元素的百分比來設定尺寸大小。最終屏幕尺寸的變化會帶來頁面元素等比縮放的效果。同時可以根據(jù)不同尺寸的設備設定不同的百分比。
• 不足：布局的時候需要進行很多的百分比計算，有時候由于屏幕尺寸不一樣而計算出小數(shù)導致不同屏幕上的顯示有略微差異。另外，很多頁面的設計上有很多元素是固定的尺寸和位置，真正需要根據(jù)屏幕大小而變化尺寸的元素并不算很多。

2. rem布局

• 特點：根據(jù)一種尺寸用px單位進行布局和重構，然后設置根元素（html）的font-size，并將所有元素的尺寸根據(jù)根元素font-size等比轉換成rem單位。最后針對不同尺寸屏幕設置不同的根元素font-size大小，即可達到在不同尺寸上所有的元素都是根據(jù)窗口尺寸進行等比縮放的效果。（rem可以理解為特殊的百分比布局，即不同尺寸的屏幕上所有元素都是按照同一個比例進行縮放的。通過用rem的方法省去了很多百分比的計算工作。）
• 不足：頁面設計的時候，并不希望在不同尺寸的屏幕上所有的元素都進行等比的縮放，例如，原則上普通的字體一般大于12pt，普通title大于18pt可以給用戶閱讀帶來較好體驗。除此之外，還有一些情況，例如商家的logo，只有固定尺寸的圖片素材，或者在平板電腦上等情況下，所有的元素都進行等比縮放會造成不好的視覺效果。

3. flex-box布局

• 特點：根據(jù)頁面的特點，將頁面進行幾個大的固定塊極的分割（例如確定頁面上下左右?guī)状髩K的占比或固定值，以及某些塊級的垂直居中等），這種場景下用flex-box進行塊級的分割布局是個很好的選擇。如下圖所示。
  
  Paste_Image.png
  
  ?? 上圖中假設一個頁面，無論在任何尺寸屏幕上，上部分都是固定的300px高度，下部分占滿剩下高度空間，同時上部分左右兩邊總是2:1的比例呈現(xiàn)，而下部分的內(nèi)容區(qū)域總是水平和垂直居中。那么就可以用flex先進行宏觀的塊極分割，然后再根據(jù)實情對沒個塊極里面的內(nèi)容進行填充。
• 不足：在安卓4.4以下chrome瀏覽器和ios7.1以下的Safari只支持舊版本的flexbox語法，并且不支持wrap屬性。

4. 內(nèi)容居中式布局

• 特點：無論在何種尺寸的屏幕上，最重要的內(nèi)容尺寸基本一致，并且將重要內(nèi)容盡量在首屏中居中顯示。這種效果最終效果是不同尺寸的屏幕上重要內(nèi)容以外的邊距和背景等可能會被縮放，但是最重要的信息總是在屏幕相對正中的位置顯示。還有一種舊的做法是針對一種較小尺寸屏幕設計一套全屏的頁面，然后在大屏幕上兩邊留白，保證所有屏幕看到的內(nèi)容都一模一樣。
• 不足：如果采用留白的方式，視覺體驗會很差，大屏幕手機用戶會覺得自己看到的內(nèi)容較為空洞。如果采用上述前種方式，雖然不同用戶都可以第一眼get到重要信息，但是會導致不同屏幕手機頁面的飽滿度存在一定差異。

5. 總結
   ?? 以上的方法各有優(yōu)劣，而在實踐中，布局方法的選擇也不能從一而終，應該根據(jù)實際情況，結合不同方法的特點，取其精華，去其糟粕，以達到最好的效果。以下是一些個人的經(jīng)驗tips和對于H5頁面重構的主要過程闡述。

• tips
  • 不要全局使用rem布局，在某些特殊情況下，比如某個局部一定要實現(xiàn)所有元素等比縮放的效果的情況下局部使用rem方式。
  • 文字在不同尺寸屏幕上盡量一樣大小，除非有特殊的產(chǎn)品需求。給用戶閱讀的文字盡量大于12pt。
  • 若要兼容不同尺寸屏幕，設計稿不能在基于大屏幕設計的情況下將可視區(qū)撐飽滿，上下左右都需要留有空白緩沖區(qū)。
  • 重要的內(nèi)容最好在首屏顯眼位置顯示，不要出現(xiàn)需要滑動手機才能看到重要信息的情況。
  • 如果有圖片，最好將圖片width設置為100%，并通過調(diào)整其父元素的css屬性來控制布局和樣式。
• H5頁面重構過程
  • 拿到視覺稿后，確認需要兼容哪些手機（設計師可能會以目前比較主流以及尺寸居中的iphone6為基準給出視覺稿），并根據(jù)視覺稿特點，確認是否需要兼容屏幕高度（即需不需要一屏展示完整，或者某些內(nèi)容需要在一屏內(nèi)展示）。
  • 如果只要兼容屏幕寬度，則確保元素或者字體左右兩邊留有空白緩沖區(qū)，以在小屏幕手機上顯示時不會橫向溢出（可以設定外圍容器固定的padding-left和padding-right，然后通過控制容器內(nèi)字體大小來調(diào)節(jié)樣式）。
  • 如果需要兼容屏幕高度，則確保頁面的下方有足夠的空白緩沖區(qū)，以在小屏幕上顯示時不會縱向溢出而出現(xiàn)滑動。
  • 如果在特殊情況下導致一套字體大小或者元素大小在小尺寸屏幕上沒辦法保證橫向或者縱向的兼容（不溢出），那么可以先用flex-box將頁面進行分塊，然后在局部使用rem調(diào)整文字和其他元素大小進行布局，并對不同尺寸屏幕用media-query的方式設置不同的html->font-size。

微信webview下H5頁面重構的特殊性

在微信的webview中，由于頂部的title高度原因，導致不同屏幕尺寸手機的可視區(qū)域寬高比各不相同，給頁面的重構帶來了一定的特殊性。
?? 在沒有title的情況下，主流ios手機（5~7plus）和主流的android手機的高寬比基本都是16:9左右（1080p）。但是由于微信webview的title在ios下固定為64pt，安卓下為73pt，導致越小尺寸屏幕的手機高寬比越小。如下圖所示。

Paste_Image.png

經(jīng)過計算后得出主流的ios和android手機在微信webview下的寬高比如下表所示。

結論
??如果設計師希望只設計一套樣式并且在不同尺寸的主流手機上都一屏展示完整，那么應該將要展示的內(nèi)容區(qū)域比例控制在14.175 : 9的范圍內(nèi)，如果還要兼容部分底部帶虛擬按鈕區(qū)的安卓手機，那么應該將內(nèi)容區(qū)域比例控制在13.25 : 9之內(nèi)。如果不希望出現(xiàn)在小尺寸手機上內(nèi)容飽滿而大尺寸手機周邊區(qū)域顯得空洞，那么久要針對以上不同比例做多套設計，例如在小尺寸屏幕上將一些文字和間距進行縮小。