响应式布局（flex布局，rem布局，流式布局，vw / vh）

响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局，可以兼容不同分辨率的设备。

一、弹性盒子布局模式

弹性盒子是CSS3的一种新布局模式，当页面需要适用不同的屏幕大小或者设备类型时确保元素拥有恰当的行为的布局方式。对一个容器中的子元素进行排列、对齐和分配空白空间。

父容器属性定义为display:flex，表示该元素内部时弹性盒子布局

 应用在父容器的常用属性：

                flex-direction    属性决定主轴的方向（即子元素的排列方向）
                flex-wrap    设置弹性盒子的子元素超出父容器时是否换行
                align-items    设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式
                align-content    修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐
                justify-content    设置弹性盒子元素在主轴（横轴）方向上的对齐方式

应用在子元素上的常用属性    

        order    设置弹性盒子的子元素排列顺序。
        flex-grow    设置或检索弹性盒子元素的扩展比率。
        flex-shrink    指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。
        flex-basis    用于设置或检索弹性盒伸缩基准值。
        align-self    在弹性子元素上使用。覆盖容器的 align-items 属性。

二、flex布局，rem布局，流式布局，vw / vh

1、flex布局

全称为 “Flexible Box Layout”，即 “弹性盒子布局”，用一种更有效的方式来布局、对齐和分配容器中项目的空间。经常用父元素display：flex; align-item:center; just-content:center;来让盒子内容水平居中对齐。

2、rem布局

rem是一个相对单位，类似于em，em是父元素字体大小。rem的基准是相对于html元素的字体大小。比如。根元素（html）设置font-size=12px;那么这里的2rem换算过来就是24px；

rem的优势：父元素文字的大小可能不一致，但整个网页就只有一个html，所以就可以很好的来控制整个页面的元素大小。

媒体查询和rem组合

rem单位大小是跟着html的字体大小来变化的，所以我们可以通过媒体查询设置不同设备的字体大小，从而实现不同设备不同效果。

页面中的宽度发生变化时，页面中的div高度也会随之变化：

https://img-blog.csdnimg.cn/2021091518305594.gif

3、流式布局（百分比布局）

流式布局是一种等比例缩放布局方式，在CSS代码中使用百分比来设置宽度，所以也称为百分比布局，它不受固定像素限制，内容向两侧填充。

流式布局方式是移动web开发使用的比较常见的一种布局方式.

缺点：流式布局主要用于解决类似的设备不同分辨率之间的兼容，如果屏幕尺寸跨度太大，那么在相对其原始设计来说过小或过大的屏幕上不能正常显示。因为宽度使用%百分比定义，但高度和文字大小等都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素被拉的很长，但是高度和文字大小还是和原来的一样，会显示的很不协调。

4、vw、vh

css3中引入了一个新的单位vw/vh，与视图窗口有关，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位。各个单位具体的含义如下：