项目为重庆友杰康体健身中心官网，项目要求为html5，css3，响应式。任务主要分为网站设计，前端制作，后台交接三部分。其中前端由我和另外两位小伙伴合作完成。由于客户需求总是不停地在变，所以项目持续了很长时间，如今整个网站接近尾声，庆贺的同时，还是不得不总结此次过程中遇到的各种坑。希望后面自己的代码能写得更漂亮，更严谨，更具灵活性。
项目网址：http://www.cqyjty.com/index.php github地址：https://github.com/kingbosser/youjie
完成首页，产品世界，产品世界详情页，案例中心，实体门店五个页面的制作，其它页面由小伙伴完成。完成之后，便是对所有网页的修改，bug修复，响应式布局调试，优化项目结构，完成初稿。然后，经由设计部，客户，后台三座大山的压力测试，才能算作基本完成。后期页面布局调整更是一项漫长的任务，也许我们是学生，真实的商业项目对我们来说那是一个难得的机会，所以我们都倍加珍惜，争取做到至善至美。
说到合作，心累。为甚么说是低效率的合作呢，因为那根本不算合作。容我细细道来。
问题一：代码风格不同；问题二：对psd设计稿的理解不同；问题三：代码存在大量冲突重复；问题四：个人审美差异大。对于问题一：代码风格不同体现在命名习惯，选用的框架，代码结构等的不同 解决方案：网搜许多专业的团队都有自己的命名规范，我自认为BEM命名法还不错。如果环境允许，我认为开始任务前，代码命名约定是十分重要地。我选用地jquery作为框架，小伙伴代码水平不一致，有选用原生js书写代码。在不影响交互和兼容的情况下，最大可能地统一语言。代码结构，我优先选择自己地结构对小伙伴的代码进行重构。毕竟对自己的还是要熟悉一点。
对于问题二：对psd设计稿的理解体现在布局方式，html代码结构和css样式的不同。其中最大的问题便是小伙伴们中的代码，竟然有定宽，这真把我震撼住了。响应式设计应该是平滑得自适应屏幕，而不是僵硬地从一个样式跳变到另一个样式。所以百分布局，弹性图片，相对单位是一个响应式必须遵守的。
对于问题三：代码存在冲突，重复体现在类名上，整合代码不是简单的拼凑，三份代码分开是没问题的，一旦合在一起，无数的bug就产生了，最煎熬地就是找出每个bug的成因，修改bug的过程我脑海里一直出现的一个词是：“牵一发而动全身”，真的就是这样，小心，谨慎，专注。
对于问题四：审美，我审美本身就不咋地，看了伙伴们的页面响应式变化，一个字，无法直视。我现在终于明白优秀的程序员必须要有一颗高质量的审美。没有他，估计，至少在国内，你做的项目只能“孤芳自赏”了。所以，我clear所有css3媒体查询文件，重新写了一份，虽不说很好看，但是至少有一定的提升。
相信大家也都多多少少做过很多项目，甚至一些大牛更是经验颇丰。我就谈谈自身在做项目过程中的问题。希望大佬能提供更优的解决方案。
a.css3 media queries 做了练习项目之后，才发现每个人定的查询结点不一致。这就导致合文件后查询样式多的不得了。从1920到320，【>1920,19201400,14001200,1200900,900600,600460,460320】我真担心哪天一个像素长度为一个区间，那才真是苦了浏览器哟。
我的理解是：很多小伙伴都去网上找合理的区间应该怎么划分，结果很多答案也不一致。所以没有特定的划分区间，区间是依据项目本身来确定的。必须跟设计部那里商量好，在什么区间页面结构如何变化合适才开始任务。
b.任务分配 其实这次的任务分配是按照页面的多少，难易进行分配。这样导致的结果是什么，许多页面页面结构相同的部分样式各有差异，这样的网页看起来就不规范。
解决方案：任务分配应该提取出公共部分，单独分配给一个人，其它小伙伴负责填补内容。这样结构统一，给人的感觉才比较正规。
c.是否精确？ 我在学习过程中，当然是还没接触响应式之前，我总会听到一些大牛说你能还原psd稿件在1px误差以内吗？直到接触了响应式，你还不得不取缔这种传统观念。响应式是不精确的，精确地那就不叫响应式。为什么呢？响应式是一个变化的过程，依靠百分布局，弹性图片，相对单位，媒体查询等，这一切都使得响应式天生就是一个动态的，不稳定的。所以自然而然也就没了精确的概念。
我的理解是：如果你的网页最大是1200px，那么你的宽度最大应该是1200/1920 = 62.%，当浏览器小于1366px时，宽度设为1200/1366 = 87.84%；当然这只是我实践中经常设置的取值，具体还是应该依照具体的设计稿计算相应的宽度。
d.左右间距怎么处理 这是我在任务过程中，经常遇到的一种布局样式。其实这样是不算合格的，因为psd设计稿要求的是最左边和最右边的图案是仅靠边界的，而我为了简单，直接为每个元素设置20%的宽度，再其内容居中，形成现在这样。
大部人第一思路：子元素float:left;每个子元素设置width:20%;针对第一个和最后一个子元素再做特殊处理。你会发现第一个间距和最后一个间距会比其它大。
大部人第二思路：子元素宽度设置为16%，然后有的人左右间距设置为定宽10px，或者设置为百分比5%；你会发现浏览器缩小的时候，结果会让你瞠目结舌的。
解决方案：我在网上查询，可以利用text-align: justify;自动计算间距的特性进行。子元素设置为display:inline-block保证一行显示。这是一种不错的方法，get到了。
//html结构 <div class="mod"> <ul class="list"> <li class="item"></li> <li class="item"></li> <li class="item"></li> <li class="item"></li> <li class="item"></li> <li class="item"></li> </ul> </div> //css样式 .list { font-size: 0; text-align: justify; /*for IE*/ text-justify: distribute-all-lines; zoom:1; } /*解决chrome text-align特性*/ .list::after { content: ""; display: inline-block; width: 100%; } .item { display: inline-block; font-size: 12px; /*IE6 7*/ *display: inline; zoom:1; }最终效果：
d.上下间距怎么处理 我刚接触响应式的时候，我天真地以为响应式就是告别px的开始，我想我错了。我们经常采用流式布局，如果你在你的代码中出现margin-top：20%；不出意外没用。因为父元素高度是靠内容撑开的，所以子元素决定父元素高度，但是百分比是依靠父元素的，所以就很尴尬了。
解决方案：适当地接受px，因为对高度的响应式突变，对整个视觉效果是不会产生明显的冲击的。
e.图片的处理 有人会说，这非常简单啊 , 弹性图片就能轻松做到啊，我很赞同！的确弹性图片的方法是再好不过了，可是只有你实践后才知道，这里面有一个大坑。那就是图片的响应式跟视觉体验的矛盾。
看图说话：这是一张长图，没问题 但是，在手机上该图片会被压缩至很小，以至于图片跟上面文字大小太过滑稽
解决方案： 利用超出部分裁剪的方法 可以看到图片右半部份被隐去，这种方法，虽然不错，但是也有一个明显的缺点，那就是对用户隐去了大量的信息
f.其它问题 如：多行文本溢出，有定高需求时响应式的变化，可扩展性等
g.本人自己写的插件 无线滚动插件（响应式的）：github地址 banner轮播插件，支持淡入淡出，滑动切换两种：github地址
响应式在发展过程中只会越来越重要，理解响应式的一些点是对做好响应式十分必要的。愿与君同进步！
