上周末时接到公司安排下来的任务， 要我一个人在一周内把一个项目里的所有固定页面转换为响应式的页面，14个页面，虽说做成响应式不难，但是，先理解别人的代码，然后通过修改别人的代码，把一个页面转换为一个响应式的页面，还是没有那么简单的，公司觉得这个任务简单，于是把这个任务交给了我这个新手。

在重构一个页面时，我的思路如下：

一、拿到一个页面，你首先要考虑这个页面我是该重新做呢还是在现有的基础上去修改呢？

我这是这么判断的，首先看他的html结构，是否符合响应式的要求，如果符合，就在现有的基础去修改，如果不符合，就要重新写html结构了，当然,css肯定也是要修改的。

二、基于第一步的判断，就有了下面两种做法：

1、在现有的基础上去修改：

首先思考一个问题，我现在要去修改别人的代码去做成响应式，需要修改什么，首先，我们知道，响应式是对布局的响应，而诸如颜色、边框之类的皮肤类的样式一般是不要对它做响应的，所以，现在我们知道了，响应是对布局的响应，那对布局的响应，又具体是对什么布局的响应呢，一般是水平方向的响应，垂直方向一般也是不响应的，固定垂直方向的尺寸就行了，然后我们要知道我们是对哪些元素进行的响应，我这里有个概念，就是布局块，一个页面的布局首先是由一个一个的大盒子构成的，然后那一个一个的大盒子则是由它里面的子盒子构成的，我们在布局时，首先是对大盒子的布局，先搭好一个房子的楼层，然后才是在楼层里面去搭厕所，搭卧室，厕所和卧室便是大盒子里面的小盒子，然后小盒子又是由一个一个更小的小盒子构成的，小盒子里面又有更小盒子，以此类推，这些都是布局块，我们在做响应式时，首先应该得是对一级的布局块的布局与响应，为了保证一级布局块里面的子级布局块的布局不和外面盒子相干，必要时触发块级格式化上下文BFC，这样能对每个盒子更好的封装，做完一级布局块的响应式后，然后就是二级的了。以此类推。说了这么多，那真正做的过程中，第一步是做什么呢，前面说过了，布局是对水平方向的布局块的响应，与垂直方向的布局和皮肤型样式不相关，所以我们首先把别人的垂直方向布局的代码和皮肤型样式copy过来，然后，现在要做的就是书写水平方向的布局样式了，这里有些水平样式是没必要重新写的，比如一个小方块。具体响应式怎么写这里就不说了。

2、重新做

重新做，首先要重新写html代码，html代码的书写按照语义化和结构化的原则来就是了，万能，没什么好说的，同样的，皮肤类样式是没必要重新写的，垂直类和固定块比如小方块的样式看着来。

经历尚浅，大致也就是这些思路。

响应式重构，如何把一个固定页面重构为一个响应式页面：