流式布局与响应式布局有什么区别或不同？

2018-4-4

流式布局 使用非固定像素来定义网页内容，也就是百分比布局，通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。

响应式开发 利用CSS3 中的 Media Query(媒介查询)，通过查询 screen 的宽度来指定某个宽度区间的网页布局。

由于响应式开发显得繁琐些，一般使用第三方响应式框架来完成，比如 bootstrap 来完成一部分工作，当然也可以自己写响应式。

区别

-	流式布局	响应式开发
开发方式	移动Web开发+PC开发	响应式开发
应用场景	一般在已经有PC端网站，开发移动的的时候只需要单独开发移动端	针对一些新建的网站，现在要求适配移动端，所以就一套页面兼容各种终端
开发	正对性强，开发效率高	兼容各种终端，效率低
适配	只适配移动设备，pad上体验相对较差	可以适配各种终端
效率	代码简洁，加载快	代码相对复杂，加载慢

THE END