在谈呼应式布局前，咱们先整理下网页规划中全体页面排版布局，常见的主要有如下几种类型：
布局类型：

布局完成
选用何种方法完成布局规划，也有不同的方法，这里根据页面的完成单位而言，分为四种类型：固定布局、可切换的固定布局、弹性布局、混合布局。
.固定布局：以像素作为页面的基本单位，不论设备屏幕及浏览器宽度，只规划一套尺度；
.可切换的固定布局：同样以像素作为页面单位，参阅干流设备尺度，规划几套不同宽度的布局。经过设其他屏幕尺度或浏览器宽度，挑选最合适的那套宽度布局；
.弹性布局：以百分比作为页面的基本单位，能够习惯必定范围内一切尺度的设备屏幕及浏览器宽度，并能完美使用有用空间展示最佳作用；
.混合布局：同弹性布局相似，能够习惯必定范围内一切尺度的设备屏幕及浏览器宽度，并能完美使用有用空间展示最佳作用；仅仅混合像素、和百分比两种单位作为页面单位。

可切换的固定布局、弹性布局、混合布局都是现在可被选用的呼应式布局方法。
其间可切换的固定布局的完成本钱最低，但拓展性比较差；而弹性布局与混合布局作用具呼应性，都是比较理想的呼应式布局完成方法。仅仅关于不同类型的页面排版布局完成呼应式规划，需求选用不必的完成方法。通栏、等分结构的适合选用弹性布局方法、而关于非等分的多栏结构往往需求选用混合布局的完成方法。

布局呼应?对页面进行呼应式的规划完成，需求对相同内容进行不同宽度的布局规划，有两种方法：桌面优先（从桌面端开端向下规划）；移动优先（从移动端向上规划）； 无论根据那种形式的规划，要兼容一切设备，布局呼应时不可避免地需求对模块布局做一些改动（产生布局改动的临界点称之为断点）， 咱们经过JS获取设备的屏幕宽度，来改动网页的布局，这一进程咱们能够称之为布局呼应屏幕。常见的主要有如下几种方法：
布局不变，即页面中全体模块布局不产生改动，主要有：
.模块中内容：揉捏－拉伸；
.模块中内容：换行－平铺；
.模块中内容：删减－添加；

布局改动，即页面中的全体模块布局产生改动，主要有：
.模块位置变换；
.模块展示方法改动：隐藏－展开；
.模块数量改动：删减－添加；

很多时候，单一方法的布局呼应无法满意理想作用，需求结合多种组合方法，但原则上尽可能时坚持简单轻盈，并且同一断点内（产生布局改动的临界点称之为断点）坚持一致逻辑。否则页面完成得太过杂乱，也会影响全体体会和页面性能。