前端页面自适应

前端页面自适应参考网页

1. rem 单位（高度） 宽度100%
2. 设置viewport进行缩放

"viewport" content="width=320,maximum-scale=1.3,user-scalable=no">

3. rem是通过根元素进行适配的，网页中的根元素指的是html我们通过设置html的字体大小就可以控制rem的大小

html{
    font-size:20px;
}
.btn {
    width: 6rem;
    height: 3rem;
    line-height: 3rem;
    font-size: 1.2rem;
    display: inline-block;
    background: #06c;
    color: #fff;
    border-radius: .5rem;
    text-decoration: none;
    text-align: center;    
}

4. 弹性布局flex

display:flex / display:inline-flex

属性：
1.flex-direction 决定主轴的方向（即项目的排列方向）row|column（列、行）
2.flex-wrap 如果一条轴线排不下，如何换行（默认情况，项目都排在一条线）

.box{
  flex-wrap: nowrap （默认不换行）| wrap （换行，第一行在上方）| wrap-reverse （换行，第一行在下方）;
}

3.flex-flow 是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
4.justify-content 项目在主轴上的对齐方式。

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

4.1 flex-start（默认值）：左对齐
4.2 flex-end：右对齐
4.3 center： 居中
4.4 space-between：两端对齐，项目之间的间隔都相等。
4.5 space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

5.align-items flex-start | flex-end | center | baseline | stretch(默认) 用于控制项目在纵轴排列方式
6.align-content 取值：flex-start | flex-end | center | space-between | space-around | space-evenly | stretch(默认);
用于控制多行项目的对齐方式，如果项目只有一行则不会起作用；默认stretch，