最近切了幾個手機端的網頁,第一次切的是美團的首頁,為了自適應不同的手機解析度,需要用到自適應布局,切圖的時候是用的第一中方法,用到了定位,後來查詢了一些其他方法,現在就介紹幾種自適應布局的實現方法:
美團網頁頭就用到了自適應
html部分:
1方法一:使用定位的方法將左右兩邊的內容固定在固定位置,中間內容width=100%,並左右margin出相應的位置放置絕對定位在該區域的『東西』;<
div
class
="main"
>
2<
div
class
="div1"
>1
div>
3<
div
class
="div2"
>2
div>
4<
div
class
="div3"
>3
div>
5div
>
1*5方法二:使用dispaly:table;作為塊級**來顯示(類似 ,根據內容來自適應).main
9.div1
18.div2
25.div3
1、設定父級元素dispaly:table;
2、左右兩邊給定固定寬度或用內容自動撐開;
3、左右兩邊設定dispaly:table-cell;
css**如下:
1* 5方法二:使用dispaly:flex;.main
8.div1,.div3
13.div1
16.div2
21.div3
1、設定父級元素dispaly:table;
2、左右兩邊給定固定寬度;
3、需要自適應的中間部分設定flex=1;
1* 5備註:.main
8.div1,.div3
12.div1
15.div2
20.div3
1、對於方法三,如果需要多列都自適應,可以分別設定flex,將按按比例進行自適應;如
.div1,.div3
.div1,.div3 均設定flex: 1;三個div將各佔父元素的三分之一的寬度,如果需要設定豎向自適應,父元設定flex-flow:clumn;
2、對於方法三,可以父元素使用display:box;或者父元素使用display:flexbox;但不同瀏覽器需要加上不同的字首來進行相容;display:box為最老版本,display:flexbox為過渡版本,dispaly:flex為最新版本,最新的主流瀏覽器基本上都支援
多種方法實現自適應三欄布局
網頁開發中,經常會遇到左右寬度固定,中間寬度自適應的三欄布局,這裡將介紹三種常用的方法 對頁面渲染順序無要求,如要求優先渲染中間部分,移步聖杯布局和雙飛翼布局 html結構 box left div center div right div div 首先提起左右依次排列,我們可以首先想到浮動,於是統...
實現手機端自適應布局的幾種方法
1.固定寬度 頭部設定 意思為根據設計稿的大小 640px 以320 iphone5 為基準進行縮放,此方法簡單粗暴高效,在後面的css樣式中只需要根據設計稿的實際大小,根據px來寫即可,可完美自適應大小不同的螢幕。這種方法目前見到的缺點有 縮放會導致有些頁面元素會糊的情況。如果此頁面有可能巢狀在別...
多種方法實現左右固定,中間自適應的CSS布局
布局是面試中常問的問題,尤其是這類的題目,怎麼答才好呢?大多數人的第乙個方法是浮動,沒錯,浮動。第二個方法呢?你回答定位,沒錯。第三個方法呢?第四個方法呢?第五個方法呢?其實能想起來兩個方法的人,這道題已經不及格了。所以呀,我來說幾種方法吧。隨便多說一點,如果你懂語意化開發並且簡歷中提到,怎麼讓面試...