工欲善其事,必先利其器!响应式Web设计七大利器

来自:http://www.csdn.net/article/2012-08-14/2808597

摘要:随着智能机的流行,用户越来越来喜欢用手机或平板电脑来查看信息,响应式Web设计也愈发显得重要了。如果你还没听过,那你就OUT啦!如何打造一款出色的且适用于任何一款移动设备的响应式Web设计呢?本文将为你支招。




响应式Web设计是在开发和设计网站过程中产生的一种方式,它的目的是让内容布局能随用户使用显示器的不同而变化。如今,响应式开发网站引入了一组新的工具以帮助开发者快速学习规则,开发跨浏览器和构建快速、有效的跨平台网站。本文搜集了一些工具和资源,你可以利用这些工具高效、快速地创建响应式Web设计。


Adaptive Images


随着智能机的流行,用户越来越来喜欢用手机或平板电脑来查看信息。这对网站来说有一定的挑战,除了小屏幕带来的挑战,图像大小也是值得考虑的问题之一。幸运的是,自适应图片——一个PHP脚本文件可运行于任何网站。自适应图片可以自动检测屏幕尺寸,并作出相应调整的HTML版图片,最终帮助你提供适用于小屏幕上的小图片。


FitText


你曾想过开发流动布局时在自动伸缩头条部分填写父元素的宽度吗?jQuery插件可以帮助你调整字体大小,并且确保这些字体适用于各种设计或浏览器。


PhotoSwipe


你知道可以从桌面向移动设备传送自定义的高清图片集吗?这款免费的HTML/CSS/JavaScript库允许开发者和设计师在网页上增强本地应用观感,能够给访问者提供一个更直观的界面与你的移动网站进行交互。它兼容所有流行的Javascript库和框架。


Less Framework


当创建多种布局网站时,最重要的一点就是保持一致性。该布局基于同一种网格,尽可能地重用元素。你只需调整宽度、字体大小或者其他的小细节。这也是减少使用框架的主要原理。拥有同一个基线网格,每个人都可以自由的保持自己的编码风格,但前提必须确保一致性。


Skeleton


使用CSS文件可以快速的响应网站。Skeleton利用轻量级的960-网格作基础,使笔记本电脑浏览器窗口到移动窗口屏幕在横向和纵向的格式之间进行随意的缩放。它配备了任何移动网站基础构成要素包括轻量级的模式,标签,按钮以及其他元素。


Responsive Testing Tool 


针对响应式网站开发,在开发期间如何进行测试?事实说明浏览器的安全性能不会让你在帧中导航。Matt Kersley——一位设计师和开发者设计了一款测试工具来帮助你解决此问题。你可以在Github上下载这款工具并安装以便在开发过程中进行测试。


Inuit CSS Framework


随着HTML5支持,inuit.css为开发流体网格配备了一个自定义网格生成器。这是一款渐进、灵活的框架,它设置了合理的界限可以让你做任何想做的事情。


英文出自:Developerdrive


PS:在今年的CSDN年度技术盛宴2012 SDCC中国软件开发者大会上来自盛大集团COO技术顾问 潘爱明将分享《人人写应用的技术平台——Web应用平台解析》。


此外,首批SDCC大会首批讲师及议题名单已经出炉啦!快来看看有没有你感兴趣的话题吧!期待您的参与(报名地址)!

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值