1.传统布局：
div+css
屏幕宽高变化时，盒子使用横向或者竖向的滚动条来查看被遮挡部分，也就是不管浏览器窗口的大小怎么变化就按html语义标签排列的布局来布置。
2.自适应布局：
根据不同尺寸，元素的位置改变，大小不变
分别为不同的屏幕分辨率定义布局，在每个布局中，页面元素不随窗口大小的调整而发生变化，当窗口大小到达一定分辨率时变化一次。
3.流式布局：
根据不同尺寸，元素的位置不变，大小变化
页面元素的宽度按照屏幕进行适配调整，元素的位置不变，大小变化，屏幕太大或者太小导致元素不能正常显示。
4.响应式布局：
流式布局和自适应布局
<meta name="viewport" content="divice-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
使用meta标签设置，页面元素宽度随窗口调整自动适配。主要属性及其含义如下：
- name="viewport"：名称=视图；
- width=device-width 页面宽度=设备宽度(可以理解为获取你手机的屏幕宽度)；
- initial-scale - 初始的缩放比例；
- minimum-scale - 允许用户缩放到的最小比例；
- maximum-scale- 允许用户缩放到的最大比例；
- user-scalable - 用户是否可以手动缩放。
5.弹性布局：
flex布局
优点在于其容易上手，根据flex规则很容易达到某个布局效果，缺点是：兼容性较差，部分兼容到ie10及以上；
6.网格布局：
grid布局
二维布局系统，随意的定义每行每列的数目和大小。也非常简单方便，缺点是：兼容性较差，部分兼容到ie10及以上；
弹性布局(flex布局)和网格布局(grid布局)推荐去看阮大神的博客