响应式设计实战：IE10优化版cnBeta诞生记

　　IE10优化版的cnBeta

　　日前，CSDN记者专访了逻辑适点商业传播设计公司项目总监邹颂兵(以下简称Saber)，他们和cnBeta合作，在IE10下，完全运用HTML5技术开发出了支持触控、瀑布流式布局的新版本。给国内用户带来一种全新的新闻浏览体验，同时也希望能够给业界HTML5的运用提供一些参考。

　　CSDN记者：这个项目如何分工，开发周期多长，如何划分开发周期?开发环节中遇到了哪些问题，其中哪部份最耗时?如何解决的?

　　邹颂兵：项目开发团队共三人，一个主开发，一人主设计，一个统筹整个项目，敏捷开发，快速迭代。分工上主要有项目管理、交互设计、UI设计和开发四个部分。开发方面从最初的原型搭建到网站上线总共是一个半月的时间。开发周期是这样划分的：原型搭建和页面元素效果实现1周;后台数据处理3天;前后台数据联调(处理后台数据并显示在前端)3天;十大文章实现1周;调试2周。

　　开发中最费时的是针对不同的平台的调试，我们遇到的问题可分为三类：

　　1). 不同分辨率的碎片化问题

　　不同的屏幕分辨率需要设计不同的信息呈现方式，在页面布局和功能上都要进行相应调整，这过程中会有很多繁杂的问题，比如当浏览器宽度小于560px的时候，文章操作栏占据太多屏幕空间，因此在应该针对这种情况重新设计它的功能和交互方式(如图1-1, 1-2所示)：

　　图1-1： 浏览器宽度 > 560px 的操作栏样式

　　图1-2： 浏览器宽度 < 560px 的操作栏样式

　　开发中最费时的是针对不同的平台的调试，我们遇到的问题可分为三类：

　　我们在原型设计的时候没有考虑到这种情况，因此在开发中代码结构也要在后期进行调整，这也提醒我们细致的原型设计的重要性。

　　2). 浏览器兼容性调试

　　对于某个技术，某个浏览器可能有自己的实现版本，或者根本无法实现。比如移动版safari上文章页的位置总是有问题，原因是我们用CSS的calc计算文章位置来显示文章页，而该浏览器对calc的支持不好，最后我们换成jquery来实现。

　　3). CSS的维护与扩展

　　随着web app的结构越来越复杂，CSS文件的规模也会越来越庞大，因此如何在程序设计时规划好样式文件，从而降低CSS的开发、维护成本，提高可扩展性是非常重要的。我们使用SASS和Compass解决这个问题。SASS是CSS3的扩展语言，不仅拥有CSS3的语法和功能，同时增强了CSS的可编程性;Compass则是基于SASS的框架，帮助人们解决浏览器兼容、样式重置等问题，提高开发速度。SASS和Compass使得我们的样式文件变得更加结构化——首先是样式定义的结构化，SASS允许元素样式的嵌套定义，因此可以将子元素的样式定义在父元素中，这样，样式的结构就变得一目了然，便于今后的维护扩展，同时保证了深层级的元素样式能够被正确定义，避免写大量重复代码;其次是文件的结构化，比如我们定义了基本样式文件，将样式重置等基本设置代码都放到这里，同时SASS还支持变量定义，因此可以将ui的颜色定义成变量放进来，在其他文件中通过“@import”引用这个文件，就能使用该变量。这样的话，我们就相当于有了一个全局的“配置文件”，在这里做一处修改能够作用与全部文件。同时，还可以为那些重要的HTML元素的样式定义单独建立SASS文件，方便查找和修改，在部署前，使用Compass将文件合并就可以了。

　　CSDN记者：IE10对HTML5的支持体现在哪些地方?在该项目中如何体现?