常用移動(dòng)布局方法
- 百分比布局
- 特點(diǎn)：所有的元素都根據(jù)其占父元素的百分比來設(shè)定尺寸大小。最終屏幕尺寸的變化會(huì)帶來頁面元素等比縮放的效果。同時(shí)可以根據(jù)不同尺寸的設(shè)備設(shè)定不同的百分比蜂桶。
- 不足：布局的時(shí)候需要進(jìn)行很多的百分比計(jì)算，有時(shí)候由于屏幕尺寸不一樣而計(jì)算出小數(shù)導(dǎo)致不同屏幕上的顯示有略微差異也切。另外扑媚，很多頁面的設(shè)計(jì)上有很多元素是固定的尺寸和位置，真正需要根據(jù)屏幕大小而變化尺寸的元素并不算很多雷恃。
- rem布局
- 特點(diǎn)：根據(jù)一種尺寸用px單位進(jìn)行布局和重構(gòu)疆股，然后設(shè)置根元素（html）的font-size，并將所有元素的尺寸根據(jù)根元素font-size等比轉(zhuǎn)換成rem單位倒槐。最后針對不同尺寸屏幕設(shè)置不同的根元素font-size大小旬痹，即可達(dá)到在不同尺寸上所有的元素都是根據(jù)窗口尺寸進(jìn)行等比縮放的效果。（rem可以理解為特殊的百分比布局，即不同尺寸的屏幕上所有元素都是按照同一個(gè)比例進(jìn)行縮放的两残。通過用rem的方法省去了很多百分比的計(jì)算工作永毅。）
- 不足：頁面設(shè)計(jì)的時(shí)候，并不希望在不同尺寸的屏幕上所有的元素都進(jìn)行等比的縮放人弓，例如沼死，原則上普通的字體一般大于12pt，普通title大于18pt可以給用戶閱讀帶來較好體驗(yàn)崔赌。除此之外意蛀，還有一些情況，例如商家的logo健芭，只有固定尺寸的圖片素材县钥，或者在平板電腦上等情況下，所有的元素都進(jìn)行等比縮放會(huì)造成不好的視覺效果慈迈。
- flex-box布局
-
特點(diǎn)：根據(jù)頁面的特點(diǎn)若贮，將頁面進(jìn)行幾個(gè)大的固定塊極的分割（例如確定頁面上下左右?guī)状髩K的占比或固定值，以及某些塊級的垂直居中等）吩翻，這種場景下用flex-box進(jìn)行塊級的分割布局是個(gè)很好的選擇兜看。如下圖所示。
Paste_Image.png
?? 上圖中假設(shè)一個(gè)頁面狭瞎，無論在任何尺寸屏幕上，上部分都是固定的300px高度搏予，下部分占滿剩下高度空間熊锭，同時(shí)上部分左右兩邊總是2:1的比例呈現(xiàn)，而下部分的內(nèi)容區(qū)域總是水平和垂直居中雪侥。那么就可以用flex先進(jìn)行宏觀的塊極分割碗殷，然后再根據(jù)實(shí)情對沒個(gè)塊極里面的內(nèi)容進(jìn)行填充。 - 不足：在安卓4.4以下chrome瀏覽器和ios7.1以下的Safari只支持舊版本的flexbox語法速缨，并且不支持wrap屬性锌妻。
- 內(nèi)容居中式布局
- 特點(diǎn)：無論在何種尺寸的屏幕上，最重要的內(nèi)容尺寸基本一致旬牲，并且將重要內(nèi)容盡量在首屏中居中顯示仿粹。這種效果最終效果是不同尺寸的屏幕上重要內(nèi)容以外的邊距和背景等可能會(huì)被縮放，但是最重要的信息總是在屏幕相對正中的位置顯示原茅。還有一種舊的做法是針對一種較小尺寸屏幕設(shè)計(jì)一套全屏的頁面吭历，然后在大屏幕上兩邊留白，保證所有屏幕看到的內(nèi)容都一模一樣擂橘。
- 不足：如果采用留白的方式晌区，視覺體驗(yàn)會(huì)很差，大屏幕手機(jī)用戶會(huì)覺得自己看到的內(nèi)容較為空洞。如果采用上述前種方式朗若，雖然不同用戶都可以第一眼get到重要信息恼五，但是會(huì)導(dǎo)致不同屏幕手機(jī)頁面的飽滿度存在一定差異。
-
總結(jié)
?? 以上的方法各有優(yōu)劣哭懈，而在實(shí)踐中唤冈，布局方法的選擇也不能從一而終，應(yīng)該根據(jù)實(shí)際情況银伟，結(jié)合不同方法的特點(diǎn)你虹，取其精華，去其糟粕彤避，以達(dá)到最好的效果傅物。以下是一些個(gè)人的經(jīng)驗(yàn)tips和對于H5頁面重構(gòu)的主要過程闡述。
-
tips
- 不要全局使用rem布局琉预，在某些特殊情況下董饰，比如某個(gè)局部一定要實(shí)現(xiàn)所有元素等比縮放的效果的情況下局部使用rem方式。
- 文字在不同尺寸屏幕上盡量一樣大小圆米，除非有特殊的產(chǎn)品需求卒暂。給用戶閱讀的文字盡量大于12pt。
- 若要兼容不同尺寸屏幕娄帖，設(shè)計(jì)稿不能在基于大屏幕設(shè)計(jì)的情況下將可視區(qū)撐飽滿也祠，上下左右都需要留有空白緩沖區(qū)。
- 重要的內(nèi)容最好在首屏顯眼位置顯示近速，不要出現(xiàn)需要滑動(dòng)手機(jī)才能看到重要信息的情況诈嘿。
- 如果有圖片，最好將圖片width設(shè)置為100%削葱，并通過調(diào)整其父元素的css屬性來控制布局和樣式奖亚。
-
H5頁面重構(gòu)過程
- 拿到視覺稿后，確認(rèn)需要兼容哪些手機(jī)（設(shè)計(jì)師可能會(huì)以目前比較主流以及尺寸居中的iphone6為基準(zhǔn)給出視覺稿）析砸，并根據(jù)視覺稿特點(diǎn)昔字，確認(rèn)是否需要兼容屏幕高度（即需不需要一屏展示完整，或者某些內(nèi)容需要在一屏內(nèi)展示）首繁。
- 如果只要兼容屏幕寬度作郭，則確保元素或者字體左右兩邊留有空白緩沖區(qū)，以在小屏幕手機(jī)上顯示時(shí)不會(huì)橫向溢出（可以設(shè)定外圍容器固定的padding-left和padding-right蛮瞄，然后通過控制容器內(nèi)字體大小來調(diào)節(jié)樣式）所坯。
- 如果需要兼容屏幕高度，則確保頁面的下方有足夠的空白緩沖區(qū)挂捅，以在小屏幕上顯示時(shí)不會(huì)縱向溢出而出現(xiàn)滑動(dòng)芹助。
- 如果在特殊情況下導(dǎo)致一套字體大小或者元素大小在小尺寸屏幕上沒辦法保證橫向或者縱向的兼容（不溢出）堂湖，那么可以先用flex-box將頁面進(jìn)行分塊，然后在局部使用rem調(diào)整文字和其他元素大小進(jìn)行布局状土，并對不同尺寸屏幕用media-query的方式設(shè)置不同的html->font-size无蜂。
微信webview下H5頁面重構(gòu)的特殊性
在微信的webview中，由于頂部的title高度原因蒙谓，導(dǎo)致不同屏幕尺寸手機(jī)的可視區(qū)域?qū)捀弑雀鞑幌嗤饧荆o頁面的重構(gòu)帶來了一定的特殊性。
?? 在沒有title的情況下累驮，主流ios手機(jī)（5~7plus）和主流的android手機(jī)的高寬比基本都是16:9左右（1080p）酣倾。但是由于微信webview的title在ios下固定為64pt，安卓下為73pt谤专，導(dǎo)致越小尺寸屏幕的手機(jī)高寬比越小躁锡。如下圖所示。
Paste_Image.png
經(jīng)過計(jì)算后得出主流的ios和android手機(jī)在微信webview下的寬高比如下表所示置侍。
| 手機(jī) | 微信webview窗口比例 |
|---|---|
| iphone5(c,s) | 14.175 : 9 |
| iphone6(s),7 | 14.472 : 9 |
| iphone6(s),7 plus | 14.609 : 9 |
| android(主流) | 14.175 : 9 |
| android(底部帶虛擬按鈕) | 13.25 : 9 |
結(jié)論
??如果設(shè)計(jì)師希望只設(shè)計(jì)一套樣式并且在不同尺寸的主流手機(jī)上都一屏展示完整映之，那么應(yīng)該將要展示的內(nèi)容區(qū)域比例控制在14.175 : 9的范圍內(nèi)，如果還要兼容部分底部帶虛擬按鈕區(qū)的安卓手機(jī)蜡坊，那么應(yīng)該將內(nèi)容區(qū)域比例控制在13.25 : 9之內(nèi)杠输。如果不希望出現(xiàn)在小尺寸手機(jī)上內(nèi)容飽滿而大尺寸手機(jī)周邊區(qū)域顯得空洞，那么久要針對以上不同比例做多套設(shè)計(jì)秕衙，例如在小尺寸屏幕上將一些文字和間距進(jìn)行縮小蠢甲。
