响应式布局
响应式布局相当于流动网格布局,一个页面在不同的分辨率终端上有不同的展现方式。（媒体查询+流动布局、媒体查询+rem）
响应式布局的设计步骤：
1.使用么meta标签
在<header>标签中加入以下标签，它告诉浏览器：使用设备的宽度作为视图宽度并禁止初始的缩放。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
（user-scalable = no 属性能够解决 iPad 切换横屏之后触摸才能回到具体尺寸的问题 ）
2.使用媒质查询来设置样式Media Queries
媒质查询是响应式设计的核心，为不同分辨率的设备指定视图宽度渲染页面。
/** iPhone **/
@media only screen and (min-width: 320px) and (max-width: 767px) {}
可以通过chrome浏览器查看不同设备的分辨率
3.一些需要注意的
（1）宽度使用百分比 #header{width：100%}
（2）处理图片的缩放方法,假如图片超过了，就缩小。假如图片小了，就原尺寸输出。
img { width: auto; max-width: 100%; }
流式布局
流式布局是利用百分比进行布局，在不同分辨率下显示相同的版式，会导致太大或者太小都无法显示。但是vh/vw的出现使得流式布局十分灵活。
流式布局：网页中主要的划分区域的尺寸使用百分数（搭配min-*、max-*属性使用），例如，设置网页主体的宽度为80%，min-width为960px。图片也作类似处理（width:100%, max-width一般设定为图片本身的尺寸，防止被拉伸而失真）。
这种布局方式在Web前端开发的早期历史上，用来应对不同尺寸的PC屏幕（那是屏幕尺寸的差异不会太大），在当今的移动端开发也是常用布局方式，但缺点明显：宽度使用百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样（即，这些东西无法变得“流式”），显示非常不协调。（参考网址：https://blog.csdn.net/lhjuejiang/article/details/80643981）
自适应布局
自适应布局有多个静态页面，每个对应一个分辨率范围，自适应设计 通过检测视口分辨率，来判断当前访问的设备是：pc端、平板、手机，从而请求服务层，返回不同的页面；
关于百分比/rem/vh
百分比
想要用百分比就必须要先了解是谁的百分比。
直观的理解，我们可能会认为子元素的百分比完全相对于直接父元素，height百分比相对于height，width百分比相对于width。
当然也有特殊的不是相对于直接父元素的，以下是特殊的情况：
1、子元素的top和bottom、left、right如果设置百分比，则相对于直接非static定位(默认定位)的父元素的高度
2、padding和margin都是只相对直接父元素的width。
3、border- radius是相对于自身的宽度。
百分比的缺点：
1）计算困难，如果我们要定义一个元素的宽度和高度，按照设计稿，必须换算成百分比单位。
2）从上面介绍可以看出，各个属性中如果使用百分比，相对父元素的属性并不是唯一的。比如width和height相对于父元素的width和height，而margin、padding不管垂直还是水平方向都相对比父元素的宽度、border-radius则是相对于元素自身等等，造成我们使用百分比单位容易使布局问题变得复杂。
自适应场景下的rem
rem单位是一个灵活的、可扩展的单位、与em不同。rem无论嵌套多少层，只相对根源素的font-size，默认大小是12px，所以1rem=12px;
通过rem布局，我们只需要动态的改变font-size的大小即可。
rem布局的缺点：
在响应式布局中必须通过js来动态控制根元素font-size的大小。
vw/wh实现自适应
1）什么是vw/vh
ss3中引入了一个新的单位vw/vh，与视图窗口有关，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位。
vw:相对于视窗的宽度，宽度为100vw
vh:相对于视窗的高度，高度为100vh
vmin:vw和vh中的较小值
vmax:vw和vh中的较大值
2）vw单位换算
如果要将px换算成vw单位，很简单，只要确定视图的窗口大小（布局视口），如果我们将布局视口设置成分辨率大小，比如对于iphone6/7 375*667的分辨率，那么px可以通过如下方式换算成vw：1px=(1/375)*100vw
也可以通过postcss的相应插件，预处理css做一个自动的转换，postcss-px-to-viewport可以自动将px转化成vw。
3）vw/vh单位兼容性
（参考连接：https://blog.csdn.net/mayue24/article/details/80892917）