响应式设计框架的优缺点

聚焦Bootstrap 3和Foundation 5,让我们一起来分析使用其中一种框架构建自己的网站的优势与短板。

浏览器兼容性

浏览器调试所花的时间有时赶上了制作网站本身所花的时间。如果你可以减少调试浏览器所花的时间,那么就是在为客户节约成本(当然也是在保护的你的头发不那么早就掉光)。

响应式设计框架是一个基于在各种浏览器调试成功的框架。使用这些框架,可以大大减少建设网站时所耗费的时间(测试次数的多少取决于你定制了多少框架的内容,如果你仅仅只是改变了几个颜色而已,那么调试的次数就非常少;如果你把框架的网格系统改来改去,那么你就需要多番调试)。

最新的框架支持IE9及以上浏览器版本。在IE8上使用框架有一点点小技巧,但是框架完全不兼容于IE6和IE7。一般情况下,框架还支持其他浏览器,比如Firefox、Safari和Chrome,以及移动端浏览器。

不幸的是,如果你想要把框架应用在还没被调试过的浏览器上,那么你需要自行花时间来修改代码做测试。

自定义文件

Bootstrap或Foundation的下载包里面都含有最基本的网站构建文件,包括富有风格的图标和小部件。一些文件会比较大。一般来说文件都是可读的经过压缩的文件格式。

由于你所选的每个框架都是集大成的框架,所以介于你不需要完全使用整个框架的所有元素,Bootstra或Foundation允许你自定义下载自己需要的部分。所以你完全可以仅仅托用你需要的css和javascript文件包用在你的web上。这样就减轻了文件膨胀,并且也减少了下载时间,同时效果是(与你下载了整个框架包所用的效果)一样的。

但是,如果你想要添加一个之前被排除在外的小部件或者风格,现在你就得重新配置包。不过这完全是可以避免的。我建议首先以建立网站为首,不要去考虑外观。首先定制自己需要的特性,然后再来下载那些仅包含特定特性的包,一旦框架就位,你就可以开始定制网站的外观了。

注意:每当新版本的Bootstrap 或Foundation发布,你就得重新下载定制包。仔细记录下你所采用的和没有采用的文件,这样在文件更新时就不需要重复这个步骤了。

自定义代码

可能需要某种程度的自定义,框架不是下载下来就可以立即上线使用的。你可能会想要改变一些颜色。而如果你有一定的经验,或许你会直接攻克网格系统。

自定义代码仅仅是因为你使用一个框架并不是为了使你的网站显得很大众化。你可以自定义css来改善你的网站外观。要么引用LESS (Bootstrap) 或者Sass (Foundation),要么直接自己写都行。

来自Bootstrap框架里的盒子样式是非常宽泛的。这里的假设就是你根本不会改变它们。所以你可以在一个单独的样式表里面引用LESS或Sass文件来覆盖它们。不幸的是LESS和Sass文件也是极小的,你需要额外的补充自己的代码。Bootstrap丰富的内置风格使它很受前端开发人员的欢迎。

Foundation有少量的风格基础。你也自定义一个样式表来覆盖它们、引用外部样式表,看起来完全自定义一个样式表会更加容易。总的来说在Foundation方面,没有一定基础的开发者会比较难以驾驭这个框架,因为它需要你首先掌握比驾驭Bootstrap需要更多的CSS 和Sass的知识。

Bootstrap和Foundation,可以在下载之前就被自定义,尽管需要简单改变一些LESS和 Sass。在Bootstrap里面,自定义选项用了几个页面来展示(与此相反,Foundation仅仅只是一点点的改变)。但是如果你对LESS和 Sass不熟悉的话,这就显得比较快捷但是比较肮脏。

同样的,你也可以通过定义javascript来定义功能。最新版本的Bootstrap和Foundation都支持使用jQuery来自定义部件。

如果你使用专门的屏幕来引用框架,那么在下次框架更新时,你还需要另外再自定义一次。

请留意Foundation拥有许多javascript分号,但是Bootstrap只有少量,这回影响开发人员的一个选择。

可访问性

可访问性对于开发者来说已经变得越来越重要了。这两个框架都有有效地HTML,但是我们有必要比较一下在HTML之外这两个框架的可访问性。

Bootstrap在 Joomla的帮助下取得了一定的进步。Joomla是一个开源的CMS,把Bootstrap引向了第3版本。Joomla的开发人员在它的可访问性方面做了很长的探讨,他们不希望Bootstrap减少CMS的可访问性,所以他们引用了ARIA规范和screen reader-only风格。

Foundation比较不幸的是到目前为止都还没有优先考虑可访问性。它不引用ARIA规范和screen reader-only风格。不过Zurb已经表示Foundation会做到更多.

响应式设计框架的优缺点

时间: 2024-12-29 06:51:24

响应式设计框架的优缺点的相关文章

设计师不应该错过的响应式设计框架

Ethan Marcotte称响应式设计是基于网格建立一个网站.Marcotte定义这项技术后,响应式设计框架开始出现,主要是css和JavaScript的结合.许多框架都是开源的,可以免费下载和快速定制. 当下最火热的框架就是Bootstrap和 Foundation了. 随着响应式设计框架越来越火,一个巨大的争议出现了:为什么一个专业的设计师还需要用这些框架呢? 许多人宣称响应式框架是可怕的,因为他们根本不懂一点点html和css的知识.下面是另一些具有标志性的反对使用框架的意见: 设计师可

Css3响应式设计

什么是响应式设计? 首先,我们要了解响应式设计是什么?一句通俗易解得话就可以概括,所谓响应式设计就是可以让你设计的网页不仅仅在PC端显示,还可以在智能机以及iPad平板等移动设备上显示,应用了响应式设计的网页可以随着分辨率的大小进行样式变化,但是响应式设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等,它更像是一种对于设计的全新思维模式现在响应式设计已经应用的越来越广,学前端的我们不能不去掌握响应式设计,像美国白宫就对其官网主页进行更新,改用了响应式网页设计,这意味着无论用户是通过何种电子设

paip.自适应网页设计 跟 响应式 设计方法与工具补充(2)o54

#-----响应式 设计框架 Bootstrap比较热门. Foundation 号称是世界上最先进的响应式前端框架. #---绝对不要使用相对地高度...只使用相对地宽度..特别大的布局上... #----------字体的自适应vw 使用em好像不生效... 使用vw走ok....  font-size: 4vw;   适合320*480-----600*900等... 顺便,要有个vmin,最小字体了.贝儿.太小李看不见.. 手动大小窗口,都能自己适合了.. 作者 老哇的爪子 Attila

响应式设计的十个基本技巧

英文原文:splio ,编译:w3cplus Responsive Design对于我来说一点都不陌生,从他在这个互联网出现的时候,就一直在观注他的成长,而且在w3cplus站上也分享了很多这方面的教程和资源.由于组织了YY活动在线上和大家分享Responsive的设计,为了能让大家更好的理解,我自己也有必要好好的做一下功课,今天这个就是功课,想和大家一起分享一下Responsive设计的一些基本技巧,和相对应的学习资源,希望对大家有所帮助. 什么是Responsive设计?有的同学认为Resp

响应式设计的一些问题

在我们介入具体项目开发流程前,我们应该已经确认了自己产品所面向的内容消费群体,以及潜在目标用户,比如简单的只面向小屏幕的移动用户群或者我们要囊括所有的显示设备(mobile.pad.pc等等). 当我们确定目标用户的内容消费习惯的同时,我们应该也对他们的访问习惯.时段等等做一些初步分析.这不仅仅面向一个响应式站点,这对产品定位到开发都有决策作用. 在移动博客项目前期的产品分析中我们能看到,随着时代的前进用户内容的消费习惯也在发生着变化. 响应式产品设计 响应式设计是从产品角度来进行的设计,在这个

16个最佳响应式HTML5框架分享

HTML5框架可以快速构建响应式网站,它们帮助程序员减少编码工作,减少冗余的代码.如今有很多免费的HTML5框架可供使用,由于它们有着响应式设计.跨浏览器兼容.相对轻量级等特点,这些框架在开发中都十分流行.如果你也对HTML5框架感兴趣,你可以看看下面我列出的一些最佳的响应式HTML5框架,帮助你快速开发网站. 1. Twitter Bootstrap 海量技术文章:http://tieba.yunxunmi.com/ 云搜 http://so.yunxunmi.com/ 让搜索更简单 采用ht

复杂产品的响应式设计【流程篇】

转载:http://ued.taobao.org/blog/2013/05/复杂产品的响应式设计[流程篇]/ 响应式网页不像传统网页只需考虑一种状态,不是交付一套设计稿就完事儿了,它给设计.前端和开发团队之间的协作模式带来新的挑战.在一个复杂产品全面响应式的项目里,交互每个阶段该产出什么?交互与视觉如何协作?前端何时介入?哪些事情让后端开发来做更合理?经历“玩客”第一版后,我们得到了一些答案. 响应式设计之所以叫响应式“设计”而不叫响应式“技术”,是因为它是一项设计先行的工作.需要设计先明确好响

复杂产品的响应式设计流程

响应式网页不像传统网页只需考虑一种状态,不是交付一套设计稿就完事儿了,它给设计.前端和开发团队之间的协作模式带来新的挑战.在一个复杂产品全面响应式的项目里,交互每个阶段该产出什么?交互与视觉如何协作?前端何时介入?哪些事情让后端开发来做更合理?经历"玩客"第一版后,我们得到了一些答案. 响应式设计之所以叫响应式"设计"而不叫响应式"技术",是因为它是一项设计先行的工作.需要设计先明确好响应方式再实现出来,不能出一套设计稿后等着前端看情况把它变成响

3个优秀响应式设计站点推荐:电子商务、主题活动、科技资讯

分享3个设计简洁优雅.配色干净利落.技术细腻的响应式设计站点: Cloggs,电子商务类 https://www.cloggs.co.uk/,移动端为其带来30%的流量增长. Canvas大会.主题页面 http://2013.canvasconf.co.uk/,蓝宝石背景风格,配色典雅迷人,细细体会不同屏幕尺寸下.网页界面的细节变化. 踏得网.技术创业门户首页 http://www.techbrood.com/,新绿.暖黄.烟灰色搭配:图片,文字,布局自适应屏幕尺寸和方向,阅读为主 上述站点技