流式布局 使用非固定像素来定义网页内容，也就是百分比布局，通过盒子的宽度设置成百分比来根据屏幕的宽度来进 行伸缩，不受固定像素的限制，内容向两侧填充。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3130.html
响应式开发 利用CSS3 中的 Media Query(媒介查询)，通过查询 screen 的宽度来指定某个宽度区间的网页布局。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3130.html
- 超小屏幕(移动设备) 768px 以下
- 小屏设备 768px-992px
- 中等屏幕 992px-1200px
- 宽屏设备 1200px 以上
由于响应式开发显得繁琐些，一般使用第三方响应式框架来完成，比如 bootstrap 来完成一部分工作，当然也 可以自己写响应式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3130.html
区别文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3130.html
| - | 流式布局 | 响应式开发 |
|---|---|---|
| 开发方式 | 移动Web开发+PC开发 | 响应式开发 |
| 应用场景 | 一般在已经有PC端网站，开发移动的的时候只需要单独开发移动端 | 针对一些新建的网站，现在要求适配移动端，所以就一套页面兼容各种终端 |
| 开发 | 正对性强，开发效率高 | 兼容各种终端，效率低 |
| 适配 | 只适配移动设备，pad上体验相对较差 | 可以适配各种终端 |
| 效率 | 代码简洁，加载快 | 代码相对复杂，加载慢 |