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