概念：响应式布局既一个网站可以兼容多个平台 实现：
- 百分比布局：通过将组件的宽高单位设置为%，实现当浏览器宽高变化时组件跟随变化。 height、width 属性的百分比依托于父标签的宽高，但是 padding、border、margin 等属性的情况又不一样，- 子元素的 padding 和 margin 如果设置百分比，不论是垂直方向或者是水平方向都相对于直接父亲元素的 width，而与父元素的 height 无关。border-radius 为百分比，则是相对于自身的宽度； 缺点：计算困难，如果我们要定义一个元素的宽度和高度，按照设计稿，必须换算成百分比单位。
- 媒体布局：通过@media 媒体查询，可以通过给不同屏幕的大小编写不同的样式来实现响应式的布局。
screen为媒体类型，当存在多个值时，可以用逗号隔开；屏幕（screen）和打印设备（print）
and表示逻辑与，表示当前设备需要满足后续参数，当前样式才生效；not表示逻辑非，表示当前设备不满足后续参数时，样式才会生效；only是一个特殊的逻辑词，它没有实际含义，一般只用在媒体类型前面，用于兼容不支持媒体查询的旧浏览器。在实际开发中一般会和栅格系统一起使用 响应式缺点：如果浏览器大小改变时，需要改变的样式太多，那么多套样式代码会很繁琐。 - rem 布局：rem是根据html根元素的字体大小设置的单位，可以通过改变html根元素的大小来改变1rem的大小
- vw、vh 响应式布局：vw 和 vh 分别相对的是视图窗口的宽度和视口窗的高度。100vw = 视图窗宽度 ，100vh = 100 视图窗高度。
- flex弹性布局：弹性布局是一种十分方便的，只需要依赖于 CSS 样式的实现响应式布局的方式，也是最多用到的一种实现响应式的方法。 属性：
- flex-direction（设置主轴方向）：row（默认主轴为水平方向，起点在左端）/row-reverse（主轴为水平方向，起点在右端）/column（主轴为垂直方向，起点在上沿）/column-reverse（主轴为垂直方向，起点在下沿）
- justify-content（设置主轴对齐方式）：flex-start（默认自左侧依次对齐）/flex-end（自右侧依次对齐）/center（居中对齐）/space-between（两端对齐）/space-around（平均分布元素之间彼此间隔相等、首尾元素与弹性容器之间留有一半的间隔，既2\1元素间隔）
- align-items（设置侧轴对齐方式）：flex-start（默认自上而下依次对齐）/flex-end（自下而上依次对齐）/center（垂直居中对齐）/baseline（元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐）/stretch（如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制）
- flex-wrap（指定弹性盒子子元素的换行方式）：nowrap（默认弹性盒子为单行可能会溢出容器）/wrap（设置为多行，溢出子元素向下创建新行显示）/wrap-reverse（自底部开始显示溢出子元素向上创建新行显示）
- align-content（用于修改flex-wrap属性的行为。类似于 align-items）：stretch（默认各行将会伸展以占用剩余的空间）/flex-start（各行向弹性盒容器的起始位置堆叠）/flex-end （行向弹性盒容器的结束位置堆叠）/center（各行向弹性盒容器的中间位置堆叠）/space-between（各行在弹性盒容器中平均分布）/space-around（各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半）
- 弹性子元素常用属性：
-
margin: auto（可以使得弹性子元素在两上轴方向上完全居中）; margin-right: auto（将剩余的空间放置在元素的右侧，其他方向同理）
-
align-self （设置弹性元素自身在侧轴（纵轴）方向上的对齐方式）：auto（计算值为元素的父元素的'align-items'值，如果其没有父元素，则计算值为'stretch'）/flex-start（元素的侧轴紧靠住该行的侧轴起始边界）/flex-end（子元素的侧轴紧靠住该行的侧轴结束边界）/center（子元素在该行的侧轴居中放置，如有溢出两端溢出相同的长度）/baseline(子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐)/stretch（指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制）
-
flex（用于指定弹性子元素如何分配空间）通常属性值为数值
