移动端常用布局 | 易学教程

一、流式布局——flex布局

很长一段时间没有写静态页面布局，很多东西都开始模糊了，趁着最近做了一个小项目，把一些静态页面布局的知识简单梳理一下，加深自己的印象

1.流式布局的特征

（1）宽度自适应，高度固定，但是不是百分百还原设计图

（2）图标和字体的大小都是固定的，并不是所有的东西都是自适应的

（3）对于大的banner图（主要指轮播图），宽度自适应

2.流式布局的类型

（1）左侧固定，右侧自适应

（2）右侧固定，左侧自适应

（3）两侧固定，中间自适应

（4）等分布局　

3-flex布局（弹性布局、伸缩布局）

给一个盒子设置了属性：display：flex；则该盒子就变成了一个弹性盒子，而弹性盒子有自己的布局规则

(1)弹性盒子的主轴排列方式

　justify-content——取值：flex-start 、flex-end、center、space-between、space-around

常用取值：space-between 均分对齐排列，两边贴边；space-around 均分对齐排列，不贴边　

（2）flex布局的换行问题

　　flex布局和浮动不同，当多个盒子设置成左或右浮动时，如果一行排放不下时，会自动掉下去。但是flex布局多行排放需要手动设置flex-wrap属性

取值：

nowrap默认值，不换行，此时不管有多少的子盒子，都排在一行，盒子越多，每个盒子所占的主轴空间越小；

　wrap 当父盒子宽度不够时就会换行

（3）flex属性：是使用flex实现自适应布局时重要属性

　　作用：当不想给盒子设置固定的宽度时，设置flex属性来按比例给盒子分配宽度，从而实现了盒子宽度的自适应（随父盒子宽度的改边而改变）

　　取值:是数值

例如：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
      .box{
        width: 600px;
        height: 300px;
        border: 1px solid red;
        margin:20px auto;
        display: flex;
      }
      .son1,.son2,.son3{
        /* 三个子盒子宽度相等 */
        flex:1;
        height: 100px;
        background: green;
      }
      .son2{
        /* flex:2  son1和son3占父盒子宽度的1/4  son2占父盒子的1/2*/ 
        background: pink;
      }
  </style>
</head>
<body>
  <div class=box>
    <div class="son1"></div>
    <div class="son2"></div>
    <div class="son3"></div>
  </div>
</body>
</html>

二、响应式布局——rem布局

　　rem：是一个长度单位，会根据根元素(html)字体大小换算

　　rem布局相对于flex布局的优点是：（1）能够让整个页面的字体和图标自适应，而且rem布局能够适配所有的屏幕，（2）不用管设计图的大小，flex布局要注意二倍图、三倍图

　　rem布局原理：因为rem的基准点是根元素html的字体大小，因此给不同屏幕的html设置不同的font-size大小，就能使不同屏幕的布局元素得到适配

　　适配不同屏幕的方法：rem + 媒体查询

　　rem布局开发的步骤：（1）给拿到的设计图固定一个font-size，推荐定为100px或50px，便于计算;（2）使用媒体查询，等比例的设置每一屏幕的html的字体大小，

比例关系：设计固定的font-size/设计图的大小 =当前屏幕的font-size/当前屏幕的大小；（3）在设计图上量出来的盒子大小全部转换为rem单位即可，不需要考虑设计图是否是二倍图、三倍图。

 /*rem + 媒体查询：以设计图：640px  font-size:100px 为例 */

     /* 适配320px~400px的屏幕 */
     @media(min-width:320px){
       html{font-size:50px}
     }
      /* 适配400px~640px的屏幕 */
     @media(min-width:400px){
       html{
         font-size: 62.5px;
       }
     }
      /* 适配640px以上的屏幕 */
     @media(min-width:640px){
       html{
         font-size:100px; 
       }
     }/*注意点:使用媒体查询适配不同屏幕时，屏幕大小要从小的往大的写，如上，因为后写的会覆盖先写的*/

来源：https://www.cnblogs.com/s-w-f/p/11919009.html

标签

flex布局

自适应

font-size