多种方法实现自适应布局

冷不防 2022-06-16 08:29 380阅读 0赞

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

美团网页头就用到了自适应![1108068-20170428182203944-793274161.png][]

地址：”长沙“，右边的”我的“是固定宽度，不会因分辨率不同而改变大小，中间内容自适应；这里就用三个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出相应的位置放置绝对定位在该区域的‘东西’;

![复制代码][copycode.gif]

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         }

![复制代码][copycode.gif]

方法二：使用dispaly:table;作为块级表格来显示（类似 <table>,根据内容来自适应）

1、设置父级元素dispaly:table；

2、左右两边给定固定宽度或用内容自动撑开；

3、左右两边设置dispaly:table-cell；

CSS代码如下：

![复制代码][copycode.gif]

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         }

![复制代码][copycode.gif]

方法二：使用dispaly:flex;

1、设置父级元素dispaly:table；

2、左右两边给定固定宽度；

3、需要自适应的中间部分设置flex=1；

![复制代码][copycode.gif]

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         }

![复制代码][copycode.gif]

备注：

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为最新版本，最新的主流浏览器基本上都支持

[1108068-20170428182203944-793274161.png]: /images/20220616/a0b4c2326b9d4226b21572fd730612d1.png
[copycode.gif]: /images/20220616/41e12df85d9042b8ba74adc8b51ddd13.png