响应式布局项目总结

最近花了三天的时间做了一个简单的响应式布局的项目，内容包含7个页面，每个页面需要兼容三个不同大小的视口，整体感觉良好，效率也还算可以，做该项目时遵循的一个原则是，不寻求最优的解决方案，满意+足够=满足是此时学习的准则。下面总结一下该项目：

收获：

1、由于该项目的很多背景图片颜色比较复杂，一开始只会利用简单的选区工具进行抠图，经过该项目后，学会了使用色彩范围来扣取背景图等做网页时所需的图片素材；

2、比较熟练的使用@media screen针对不同视口布局的属性；

3、了解到了一些针对响应式布局的“潜规则”，如：（1）先对小视口进行设计，再到大视口的设计，这样做的好处是，当视口变大时不会导致内部元素的布局变得混乱，此时再针对大视口设计只需微调一下内部元素样式，不必大范围进行改动。但有时也需要看具体情况，比如，响应式需要适应多个视口，而大视口的页面相似程度较高，此时的话，可选择从大到小的循序进行设计；

4、搞清楚了响应式和自适应布局的区别，响应式只是针对不同视口的一些特定样式，自适应相对来说只是适应一定范围视口和高度的布局，自适应更多的是用于移动端的布局，响应式则是可以适应多端的布局；

不足：

1、由于项目硬性需求不是太明确，加入了很多个人的想法，跟项目的原始样式有些出入；

2、做项目前仍没有形成一个大致的思路，项目一拿到就直接动手，这样的直接影响了后面的效率；

总的来说，响应式的布局跟简单的固定布局没有特别的出入，只是使用了针对不同视口的的媒体查询语句和一个用来适应不同视口的meta标签。