移動(dòng)端的網(wǎng)站設(shè)計(jì)是從移動(dòng)互聯(lián)網(wǎng)的爆發(fā)發(fā)展而來的。而說到移動(dòng)端的網(wǎng)站建設(shè)大部分人都會(huì)想起彈性盒,不過確實(shí)彈性盒在寬度的適配上的確十分出色,但其缺點(diǎn)就是它不能夠兼容所有的移動(dòng)設(shè)備,那么如果我們不使用彈性盒,還有哪些布局技巧可以使用呢?
1、 上下均固定的與中間彈性的網(wǎng)頁布局設(shè)計(jì)
這種布局設(shè)計(jì)是移動(dòng)端使用最廣泛的網(wǎng)站設(shè)計(jì)形式,而在生活中我們也經(jīng)常會(huì)看到上下都有導(dǎo)航欄的網(wǎng)頁布局設(shè)計(jì)。
在設(shè)計(jì)中我們可以把網(wǎng)頁的頭部與尾部固定在內(nèi)容區(qū)域的上下邊緣上,這時(shí)候網(wǎng)站的整體內(nèi)容也是鋪滿整個(gè)屏幕的。而頭部與尾部的寬度一定要給出固定值。
2、 左邊固定,右邊彈性設(shè)計(jì)
這也是移動(dòng)端網(wǎng)站設(shè)計(jì)比較常用的布局方式。
①浮動(dòng):網(wǎng)頁的左邊只需要固定好寬度,然后右邊的寬度進(jìn)行彈性設(shè)置,最后把溢出隱藏化設(shè)計(jì);
②定位:我們可以通過定位的方式把左邊的菜單定位到右側(cè)內(nèi)容的邊框上。
3、 左邊與右邊均固定,而中間彈性化顯示
在移動(dòng)端的網(wǎng)站設(shè)計(jì)中,左右固定而中間彈性化設(shè)計(jì)的方式一般會(huì)用到網(wǎng)頁的頭部菜單顯示上。
①浮動(dòng):這里就需要注意HTML結(jié)構(gòu)的書寫順序了,需要從左向右書寫,最后寫中間的內(nèi)容。
②定位:如果使用定位法來實(shí)現(xiàn)這種格局,那么就把左右兩邊分別固定在內(nèi)邊距上就可以,但一定要記住添加坐標(biāo)。