基于bs响应式网站开发

项目背景：

 门户网站项目，pc端设计图1920*；手机端设计图：750*，无pad设计稿，页面总量50左右，前端整体采用bs框架开发。

前端方案：

 框架选择：主流框架bs

 尺寸单位：引用下面的代码，使用rem单位，1px或者2px的直接使用px       

1. //设计稿是750,采用1：100的比例
2. (function(doc, win) {
3. var docEl = doc.documentElement,
4. resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
5. recalc = function() {
6. var clientWidth = docEl.clientWidth;
7. if(!clientWidth) return;
8. if(clientWidth > 1600) {
9. docEl.style.fontSize = '100px';
10. }else {
11. docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
12. }
13. };
15. if(!doc.addEventListener) return;
16. win.addEventListener(resizeEvt, recalc, false);
17. doc.addEventListener('DOMContentLoaded', recalc, false);
18. })(document, window);

 断点选择：采用bs框架自带的断点：768 992 1200

 样式在各个不同的分辨率下用media控制。

回顾总结：

 这个项目是我第一次带领着几个应届生小朋友开发的项目，所有的东西也都是在完全不了解的基础上，通过各种网络资源学习到的，整体感觉还是比较成功的。但是也有很多改进的地方。

 首先从前期讨论方面：感觉定了是响应式的项目，一定不要妥协，尤其是公共的部分，比我们项目中网站的头部，吃了很大的亏，每次改的时候都会投入维护。

 其次需要改进的和大家探讨的地方：

1. 设计图的尺寸问题，当时只是考虑了手机端的设计图，没有考虑pc的设计图，pc给的是1920的，导致在1366*768分辨率下字体很大，这里希望大家要是做过此类项目的话，在下面留言交流。
   
2. 断点的选择：我们本身选择的是px作为断点的单位，但是觉得用em的话会更好。
3. 目录结构组织：我们这个项目有三个站，所有每个站的话是单独的一个文件夹，因为第一次搭建项目，所以这个方面欠缺，所以希望有经验的朋友留言交流。