本文主要是介绍基于bs响应式网站开发，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
项目背景：门户网站项目，pc端设计图1920*；手机端设计图：750*，无pad设计稿，页面总量50左右，前端整体采用bs框架开发。
前端方案：
框架选择：主流框架bs
尺寸单位：引用下面的代码，使用rem单位，1px或者2px的直接使用px
//设计稿是750,采用1：100的比例(function(doc, win) {var docEl = doc.documentElement,resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',recalc = function() {var clientWidth = docEl.clientWidth;if(!clientWidth) return;if(clientWidth > 1600) {docEl.style.fontSize = '100px';}else {docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';}};if(!doc.addEventListener) return;win.addEventListener(resizeEvt, recalc, false);doc.addEventListener('DOMContentLoaded', recalc, false);})(document, window);
断点选择：采用bs框架自带的断点：768 992 1200
样式在各个不同的分辨率下用 media控制。
回顾总结：
这个项目是我第一次带领着几个应届生小朋友开发的项目，所有的东西也都是在完全不了解的基础上，通过各种网络资源学习到的，整体感觉还是比较成功的。但是也有很多改进的地方。
首先从前期讨论方面：感觉定了是响应式的项目，一定不要妥协，尤其是公共的部分，比我们项目中网站的头部，吃了很大的亏，每次改的时候都会投入维护。
其次需要改进的和大家探讨的地方：
- 设计图的尺寸问题，当时只是考虑了手机端的设计图，没有考虑pc的设计图，pc给的是1920的，导致在1366*768分辨率下字体很大，这里希望大家要是做过此类项目的话，在下面留言交流。
- 断点的选择：我们本身选择的是px作为断点的单位，但是觉得用em的话会更好。
- 目录结构组织：我们这个项目有三个站，所有每个站的话是单独的一个文件夹，因为第一次搭建项目，所以这个方面欠缺，所以希望有经验的朋友留言交流。
这篇关于基于bs响应式网站开发的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
