首页 > 代码库 > 多种方法实现自适应布局

多种方法实现自适应布局

最近切了几个手机端的网页,第一次切的是美团的首页,为了自适应不同的手机分辨率,需要用到自适应布局,切图的时候是用的第一中方法,用到了定位,后来查找了一些其他方法,现在就介绍几种自适应布局的实现方法:

美团网页头就用到了自适应技术分享

地址:”长沙“,右边的”我的“是固定宽度,不会因分辨率不同而改变大小,中间内容自适应;这里就用三个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为最新版本,最新的主流浏览器基本上都支持

多种方法实现自适应布局