最近切了幾個手機端的網頁，第一次切的是美團的首頁，為了自適應不同的手機解析度，需要用到自適應布局，切圖的時候是用的第一中方法，用到了定位，後來查詢了一些其他方法，現在就介紹幾種自適應布局的實現方法：
美團網頁頭就用到了自適應
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布局
布局是面試中常問的問題，尤其是這類的題目，怎麼答才好呢？大多數人的第乙個方法是浮動，沒錯，浮動。第二個方法呢？你回答定位，沒錯。第三個方法呢？第四個方法呢？第五個方法呢？其實能想起來兩個方法的人，這道題已經不及格了。所以呀，我來說幾種方法吧。隨便多說一點，如果你懂語意化開發並且簡歷中提到，怎麼讓面試...