按功能区分：
静态布局(固定宽度)： 所有尺寸为固定的尺寸，即写死尺寸（一般为px）, 早期有些网站把页面设置成320的宽度，超出部分留白
优点： 操作简单
缺点： 不能适配不同设备, 还有一个就是大屏幕手机下看起来页面会特别小，操作的按钮也很小
inline-block(普通流）布局: 使用display: inline-block来布局网站
优点：
缺点：
百分比布局（流式布局）： 使用百分比做单位
优点： 能较好适应不同设备， 可以部分采用宽度100%， 高度auto的处理，达到自适应，比如：轮播图
缺点： 添加元素时需更改其他元素； 在页面布局的时候都是通过百分比来定义宽度，但是高度大都是用px来固定住，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度还是和原来一样，实际显示非常的不协调，这就是流式布局的最致命的缺点
rem布局： 通过设置html的font-size大小就可以控制rem的大小，通过改写html的font-size基准值，来实现不同设备之间的适配， 实现自适应有两个途径， @media（一般我们在做web app都会先统计自己网站有哪些主流的屏幕设备，然后去针对那些设备去做media query）和js动态计算（通过一段js根据浏览器当前的分辨率改变font-size的值）
优点： 只要将rem与屏幕分辨率关联起来就可以实现页面的整体缩放，所以设备上的展现都统一起来了。 比如美工是在640px下设计的页面，font-size:12px; 然后我们计算一下再320下面的尺寸就行了, font-size:6px;
缺点： 如果图片使用rem定义宽高度，但没有高清的图片的话，再大屏幕上会模糊， 还有有一些图片或div不需要放大，但使用rem的话，默认就会放大， 纯js计算的话，因为变动幅度太大，页面可能会闪烁，最好是结合使用，@media之后，再经过js矫正，元素改变的幅度不太大的话，就不会闪烁
浮动布局： float + clear
优点： 写法简单，实现效果起来干脆利落
缺点： 对浮动元素要求比较严格，布局也不太灵活
定位布局： 利用position+四个方位的具体值（top/left/right/bottom）相互配合
优点： 弹窗
缺点： 移动端中频繁的使用定位，会出现一些莫名的bug;fixed+input在ios上存在bug,会出现使用fixed布局的元素乱掉。在android手机上当input框获取焦点时，换气键盘，会出现定位的元素被抬升至手机键盘的上方
flex布局：
优点： 自适应很好，灵活性很强，目前在移动端应用的还是比较广泛
缺点： 需要写很多兼容代码
响应式布局: 使用@media(媒体查询)设置页面在不同的屏幕宽度下达到自适应，一般单位为px， 可以使用Chrome调试工具来获得各种手机的屏幕分辨率
优点： 不仅在不同的屏幕下达到自适应，还会在相应的屏幕下对页面布局，样式做出相应的调整，达到更加的用户体验
缺点： 兼容各种设备工作量大，效率低下；代码累赘，会出现隐藏无用的元素，加载时间过长, 在国内很少有大型企业的复杂性的网站在移动端用这种方法去做，主要原因是工作大，维护性难, 一般都是中小型的门户或者博客类站点会采用响应式的方法从web page到web app直接一步到位
viewport: 判断不同的显示器，按照设计的尺寸进行缩放，比如以320宽度为基准，进行缩放，到了iPhone6 Plus对应的应该是 initial-scale=414/320 =1.30; <meta name="viewport" content="width=device-width, user-saclable=no, initial-scale=1.3" />
优点： 较好适配
缺点： 这样做会使得，因为initial-scale越来越大，相当于拉伸网页，而使得在大屏幕的移动端设备下，文字、图片会变模糊
全屏布局：
网格布局:
混合布局：
优点： 布局灵活，集合其他布局的优势达到自己的布局要求
缺点： 代码有点累赘；代码不统一，维护困难
按列数区分：
单列布局
2列布局
3列布局：
圣杯布局:
双飞翼布局： 左右宽度固定，中部自适应
多列布局：
等分布局： 多列的宽度时一致的
等高布局： 多列的高度是一致的
需要js配合的：
瀑布流布局：
js计算:
多列:
综上所述， 我认为目前最合理的自适应的布局方式为: