多种方法实现自适应布局

Posted 2020-09-17 谢维开

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

美团网页头就用到了自适应

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