手機(jī)網(wǎng)站常用的六種布局方案優(yōu)缺點(diǎn)分析

現(xiàn)在越來越多的小伙伴們開始進(jìn)行了手機(jī)網(wǎng)站的移動端開發(fā)。但是，手機(jī)網(wǎng)站常用的六種布局方案的優(yōu)缺點(diǎn)，大家又必須去了解，才能決定自己使用什么樣的布局方案。

之前25學(xué)堂也跟大姐夫分享了《移動端的webapp頁面布局教程和webapp實(shí)戰(zhàn)分析》和《WebApp設(shè)計視頻—Flex移動布局與完整解析》

閃發(fā)車

下面我們所說的是需要兼容的系統(tǒng)為iOS 5+、Android 2.3+、Windows Phone 8+。對于普通頁面來說，iOS比較好兼容；Android低版本有老規(guī)范，需要注意；Windows Phone 8里按道理說應(yīng)該是IE11，結(jié)果QQ和百度瀏覽器還是IE10的內(nèi)核。。。

所以一般CSS3的代碼通常要寫兩至四句，兼容以上各種系統(tǒng)： 

-webkit-transition: all 0.5s ease;

transition: all 0.5s ease;



-webkit-box-flex: 1;

-webkit-flex: 1;

-ms-flex: 1;

flex: 1;

這里沒有火狐什么事。關(guān)于瀏覽器前綴支持，請看caniuse這個網(wǎng)站。

下面我將介紹五種常見的布局方式，希望給大家一點(diǎn)思路。理解原理，合理運(yùn)用，不要照抄?！?a target="_blank">DEMO←

 

1、固定布局

固定布局是第一次做移動端的朋友們最好的選擇方式，思路沿用PC端，上手比較快。<head>里把viewport加好，然后設(shè)想整個網(wǎng)頁的寬度為320px即可。其他地方PC端怎么布局，這里類似即可。

缺點(diǎn)也顯而易見，大屏手機(jī)顯示網(wǎng)頁比較寬，而固定布局寬度參照永遠(yuǎn)是320px，導(dǎo)致左右兩邊會有空白。就像你用27寸顯示器看980px寬度網(wǎng)頁一樣。另一個方面就是手機(jī)橫屏的時候，兩邊空白更寬。

2、流動布局

以前PC端很少用到這種布局，因為我們需求要么網(wǎng)頁就一種寬度，要么就兩種寬度，分寬窄屏處理。而手機(jī)上不同，大部份手機(jī)默認(rèn)寬度都不一樣，所以流動布局可以很好解決自適應(yīng)需求。

流動布局重點(diǎn)就是使用百分比來代替?zhèn)鹘y(tǒng)px作為單位（當(dāng)前容器寬度除以父級容器實(shí)際寬度）。例如設(shè)計稿寬度為640px，上面有一個導(dǎo)航里包含四個菜單，四周邊距為20px，四個菜單等寬，那么邊距應(yīng)該為20px/640px=3.125%，每個菜單的寬度為100%/4=25%。DEMO里還有邊框，所以記得改變盒子模型，加box-sizing:border-box。

優(yōu)點(diǎn)是無論網(wǎng)頁寬度如何改變，四個菜單的寬度永遠(yuǎn)一樣，并且等寬。缺點(diǎn)是不夠靈活，如果菜單數(shù)量有變化，就滿足不了了。

3、浮動布局

很多樂觀的人，看到Flexbox最新一版的規(guī)范，滿心歡喜的覺得移動端可以不用浮動布局了。但很遺憾，對于Android 2.3支持的Flexbox老規(guī)范，連最簡單的多行商品按順序排列，都實(shí)現(xiàn)不了。對于這種情況，我喜歡用傳統(tǒng)的浮動方式。因為對于開發(fā)人員，這種循環(huán)是最簡單的。再加上:nth-child偽類處理邊距，干脆利落。所以，我并沒有放棄浮動布局。

當(dāng)然，因為不需要兼容老版本IE了，浮動的寫法也變得簡單許多。 

.clearfix{

    content:"";

    display:table;

    clear:both;

}

我在Less的公共代碼庫里，也加了這個： 

.clearfix(){

    &:after{

        content:"";

        display:table;

        clear:both;

    }

}

需要清除浮動，直接寫.clearfix()即可。

floid app工具

4、Flexbox布局

上一篇入門文章已經(jīng)提到這貨了，不知道你有沒有試過，是不是很神奇？現(xiàn)在我大部份布局都是用Flexbox，包括你以前用浮動的情況，大部份也可以用Flexbox代替。

例如上面流動布局用百分比做的寬，局限性就是無法增加刪除菜單，改變菜單數(shù)量。如果改為用Flexbox布局，這個問題迎刃而解，不論菜單有多少個，都自動等寬排列成一行。

再說兩點(diǎn)：

Flexbox有好幾版，所以會導(dǎo)致不兼容的情況，特別是Android 2.3。做了個小工具→Flexbox生成工具←。暫時只做了最簡單的幾種情況，但都兼容iOS 5+、Android 2.3+、Windows Phone 8+，滿足日常需求沒問題。

在Flexbox里，margin很神奇，所以會導(dǎo)致你頻繁用margin:auto;。如果你養(yǎng)成了這個壞習(xí)慣，老iOS和老Android里會死得很慘。建議用Flexbox工具里的技術(shù)屬性，來處理居中情況。

5、混合布局

把所有學(xué)到的知識，靈活運(yùn)用在布局中，我稱之為混合布局。

例如我上面DEMO里的混合布局示例，設(shè)計稿寬度640px，邊距20px，左側(cè)大圖寬高390px，右側(cè)小圖寬高190px。首先外層容器Flexbox，讓里面左右結(jié)構(gòu)顯示。容器640px去掉左右邊距40px剩600px，左側(cè)390px/600px=65%，右側(cè)190px/600px=31.66666667%，兩者之間邊距20px/600px=3.33333333%。右側(cè)里面小圖片直接寬度100%，高度跟寬度1：1，最后通過Flexbox讓兩個圖一上一下，完成。三張圖片記得用圖片自適應(yīng)，比例1：1。

6、定位布局

定位在移動端也用得挺多，特別是彈窗。 

position: fixed;

left: 50%;

top: 50%;

-webkit-transform:  translate3d(-50%,-50%,0);

transform:  translate3d(-50%,-50%,0);

如此簡單就搞定水平垂直居中的彈窗。

實(shí)際使用中，有少數(shù)幾個手機(jī)的瀏覽器居然不支持translate3d，實(shí)在無語。如果非要兼容這些瀏覽器，推薦使用Flexbox彈窗。

擴(kuò)展一下，移動端建議用硬件加速的屬性，相關(guān)鏈接1、鏈接2，而不是直接用margin。（我測試過transition移動一個div，margin會卡頓）

需要各位手機(jī)網(wǎng)站前端開發(fā)人員需要注意的常見問題：

  

a、雖然移動端不用寫:hover，但光寫個:active是不夠的。實(shí)測Android 2.3下按過的按鈕會留下瀏覽器默認(rèn)顏色，所以記得給:visited也加個顏色。

b、遇到寫動畫animation的時候，不要用到偽類上。不然Android是沒效果的。

c、用Flexbox做等分時，記得給寬度。不然Android里如果內(nèi)容字?jǐn)?shù)不一樣，會撐開。

其他需要各位來待補(bǔ)充啦！

 

 

常用學(xué)習(xí)移動前端網(wǎng)站分享

caniuse

二維碼生成器，chrome插件

font-face 圖標(biāo)生成工具

CSS3動畫手冊

webkit css library

webAPP前端學(xué)習(xí)資料

WebAPP移動前端性能優(yōu)化規(guī)范和設(shè)計指導(dǎo)

四種webAPP橫向滑動模式圖解—H5頁面開發(fā)

 

以上部分內(nèi)容來源：http://ons.me/480.html

每天更新，
全站高品質(zhì)素材免費(fèi)下載！