响应式布局方法

一、媒体查询

@media媒体查询可以针对不同的媒体类型定义不同的样式，如下代码示例：

 <style>

     div{

      width: 100px;

      height: 200px;

    }

    @media screen and (min-device-width:200px) and (max-device-width:300px){

      div{

        background-color: red;

      }

    }

       @media screen and (min-device-width:301px) and (max-device-width:500px){

      div{

        background-color: blue;

      }

    }

  </style>

二、百分比

宽高会随着浏览器的宽高发生等比放大或缩小，由此来实现响应式效果

三、vw/vh

vw是相对于视图窗口的宽度，vh相对于视图窗口高度

四、rem

字符单位，1rem=16px；用于设置字体大小变化

五、flex弹性布局（常用）

1、容器属性

flex-direction（主轴方向）

1.row:从左沿水平方向排布

2.row-reverse:从右沿水平方向排布

3.column:从上沿垂直方向排布

4.column-reverse:从下沿垂直方向排布

flex-wrap

1.nowrap:不换行

2.wrap:换行

Justify-content（主轴）

（相对于flex-direction，它的排序没有发生变动）

1.flex-start:左对齐

2.flex-end:右对齐

3.center:居中

4.space-between:两端对齐

5.space-around:盒子两侧间隔相等

align-items（交叉轴）

1.flex-start:上对齐

2.flex-end:下对齐

3.center:居中

4.baseline:基线对齐

5.stretch:盒子未设置高度将占满整个容器

align-content（用于多行，多行为一整体）

2、盒子属性

1.order（盒子的位置排序）

2.align-self（侧轴的对齐方式）

3.flex-grow（设置放大占剩余空间的比例，为0为不占剩余空间保持本身宽度）

4.flex-shrink（设置缩小占总空间比例，当子元素总宽度大于父元素空间时，为0时不缩放，保持本身宽度，）

5.flex-basis（初始值）

6.flex

(flex：flex-grow  flex-shrink  flex-basis)