1.静态布局：
布局特点：宽高固定
2.自适应布局：
布局特点：不同分辨率下，页面元素位置变化，大小不变
实现方法:针对不同分辨率创建对应的样式表，使用 @media 媒体查询给不同尺寸的设备切换不同的样式
缺点：IE8及以下不支持媒体查询；只能兼容主流分辨率
3.流式布局（百分比布局）:
布局特点：不同的分辨率下显示相同的排版；高度固定，宽度自适应
实现方法:网页中主要区域的尺寸使用百分比；
缺点：大屏幕上元素被拉长，但是文字，高度还是固定大小，不协调
经典流式布局：左侧固定，右侧自适应；两侧固定，中间自适应
4.弹性布局（rem/em布局）：
布局特点：页面元素宽度，高度，字体大小会跟着屏幕大小缩放
实现方法:使用js监听当前屏幕大小，设置html的字体大小
缺点：IE678不兼容；需要计算；
5.响应式布局：
布局特点：每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变，响应式设计的目标是确保一个页面在所有终端上（各种尺寸的PC、手机、手表等等）都能显示出令人满意的效果
实现方法：媒体查询+流式布局
优点：适应pc和移动端
缺点：要匹配足够多的屏幕大小，工作量大，设计也需要多个版本
7.响应式和弹性布的区别：
响应式布局：改变浏览器宽度，布局会随之变化，不是一成不变的（例如导航栏在大屏幕下是横排，在小屏幕下是竖排，在超小屏幕下隐藏为菜单）也就是说如果有足够的耐心，在每一种屏幕下都应该有合理的布局，完美的效果
rem布局：改变浏览器宽度，页面所有元素的高宽都等比例缩放，也就是大屏幕下导航是横的，小屏幕下还是横的只不过变小了。
vw,vh：
相对于视口；PC端指的是浏览器的可视区域；
1vw等于视口宽度的1%,1vh等于视口宽度的1%（1920*1080的屏幕，1vw = 19.2px,1vh = 10.8px）
IE8以及IE8以下不兼容
rem:
相对于根元素html字体大小；谷歌浏览器默认字体大小是16px;
IE678不兼容
em:
相对于父元素的字体大小；默认1em=16px;
参照物不稳定
来源：https://www.cnblogs.com/zxmonster/p/12548821.html