移动web适配之rem

一、常见移动web适配方式

• 1、定高、宽度百分比； 
• 2、flex布局； 
• 1、媒体查询；  

二、flex布局

<div class='main'>
    <div class='c1'>子元素1</div>
    <div class='c2'>子元素2</div>
    <div class='c3'>子元素3</div>
</div>

.main{
    display:flex;
    flex-direction: column;   // flex 项排成一列
    // flex-direction: row-reverse   flex 项以相反的顺序排成一行
    // flex-direction: column-reverse   flex 项以相反的顺序排成一列
    // justify-content: flex-end;  靠右对齐的 flex 项
    // justify-content: center; flex 项居中对齐

    //flex 项铺开
    // justify-content:space-between;  任何两个相邻 flex 项之间的间距是相同的，但不一定等于第一个/最后一个 flex 项与 flex 容器边缘之间的间距;起始边缘和第一个项目之间的间距和末端边缘和最后一个项目之间的间距是相等的。  
    // justify-content:space-around;   flex 容器中的每个 flex 项的每一侧间距都是相等的。请注意，这意味着两个相邻 flex 项之间的空间将是第一个/最后一个 flex 项与其最近边缘之间的空间的两倍。
}


// flex 项在交叉轴上的对齐(即水平垂直居中)
.main{
    display: flex;
    justify-content: center;
    align-items: center;
}

// 拉伸 flex 项，flex-grow 只有在 flex 容器中有剩余空间时才会生效
.main{
    dispaly:flex;
}
.c1{
    flex-grow:0;   //不拉伸
}
.c2{
    flex-grow:1;   //占剩余空间的1/3
}
.c3{
    flex-grow:2;   //占剩余空间的2/3
}

//收缩元素 flex-shrink 只有在 flex 容器空间不足时才会生效
.main{
    dispaly:flex;
}
.c1{
    flex-grow:0;   //不收缩
}
.c2{
    flex-shrink:1;   //收缩1/3
}
.c3{
    flex-shrink:2;   //收缩2/3
}

三、rem

•   rem的基准值为 html 的 font-size 值；