最近切了幾個手機端的網頁，第一次切的是美團的首頁，為了自適應不同的手機分辨率，需要用到自適應布局，切圖的時候是用的第一中方法，用到了定位，后來查找了一些其他方法，現在就介紹幾種自適應布局的實現方法：

美團網頁頭就用到了自適應

地址：”長沙“，右邊的”我的“是固定寬度，不會因分辨率不同而改變大小，中間內容自適應；這里就用三個div來代替表示吧。

html部分：

1 <div class="main"> 2 <div class="div1">1</div> 3 <div class="div2">2</div> 4 <div class="div3">3</div> 5 </div>

方法一：使用定位的方法將左右兩邊的內容固定在固定位置，中間內容width=100%,并左右margin出相應的位置放置絕對定位在該區域的‘東西’;

1 *{2 padding: 0;3 margin: 0;4 }5 .main{6 height: 30px;7 position: relative;8 }9 .div1{ 10 width: 30px; 11 height: 30px; 12 background: blue; 13 float: left; 14 position: absolute;//相對其父元素定位 15 left: 0; 16 top: 0; 17 } 18 .div2{ 19 width: 100%; 20 height: 30px; 21 background: green; 22 float: left; 23 margin: 0 30px; 24 } 25 .div3{ 26 width: 30px; 27 height: 30px; 28 background: red; 29 float: left; 30 position: absolute; 31 right: 0; 32 top: 0; 33 }

方法二：使用dispaly:table;作為塊級表格來顯示（類似 <table>,根據內容來自適應）

1、設置父級元素dispaly:table；

2、左右兩邊給定固定寬度或用內容自動撐開；

3、左右兩邊設置dispaly:table-cell；

CSS代碼如下：

1 * {2 margin: 0;3 padding: 0;4 }5 .main {6 display: table;7 }8 .div1,.div3{9 width: 100px; 10 height: 300px; 11 display: table-cell; 12 } 13 .div1 { 14 background: red; 15 } 16 .div2 { 17 background: blue; 18 height: 300px; 19 20 } 21 .div3 { 22 background: black; 23 }

?

方法二：使用dispaly:flex;

1、設置父級元素dispaly:table；

2、左右兩邊給定固定寬度；

3、需要自適應的中間部分設置flex=1；

1 * {2 margin: 0;3 padding: 0;4 }5 .main {6 display: flex;7 }8 .div1,.div3{9 width: 100px; 10 height: 300px; 11 } 12 .div1 { 13 background: red; 14 } 15 .div2 { 16 background: blue; 17 height: 300px; 18 flex: 1; 19 } 20 .div3 { 21 background: black; 22 }

備注：

1、對于方法三，如果需要多列都自適應，可以分別設置flex，將按按比例進行自適應；如

.div1,.div3{
flex: 1;
height: 300px;
}

.div1,.div3 均設置flex: 1;三個div將各占父元素的三分之一的寬度，如果需要設置豎向自適應，父元設置flex-flow:clumn;

2、對于方法三，可以父元素使用display:box;或者父元素使用display:flexbox;但不同瀏覽器需要加上不同的前綴來進行兼容；display:box為最老版本，display:flexbox為過渡版本，dispaly:flex為最新版本，最新的主流瀏覽器基本上都支持

轉載于:https://www.cnblogs.com/xieweikai/p/6837941.html

總結

以上是生活随笔為你收集整理的多种方法实现自适应布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。