10款非常有效的帮助你设计超酷响应式布局的jQuery插件

日期：2012/02/24 来源：GBin1.com



如 果你关注最近几年的web设计，那么响应式布局(responsive layout)设计对于你来说肯定不是一个陌生的词汇。 相对于传统的页面设计来说，今天的设计者需要考虑的用户来源和用户体验对于设计者来说是一个非常大的挑战，因为随着硬件的更新，新设备的出现，你需要能够 使得你的网站能够针对不同的设置做出最好显示响应。最初这个名称来自于Ethan Marcotte的文章“Responsive Web Design”，设计的理念在于为了有效的利用空间和布局来满足用户阅读过程中产生的不同使用行为，并且及时的做出响应。现在的响应式设计中，我们网站也针对不同的设备的显示尺寸来有效的改变页面布局和样式。如果大家使用过jQuery mobile网站API文档的话，你可以看到它也是用了响应式设计的模式，如果你使用浏览器浏览文档，如果你变化你的浏览器尺寸，显示的内容也会根据浏览器尺寸变化。

今天这里我们将介绍几款非常不错的jQuery插件来帮助你构建你的响应式设计，希望大家喜欢，如果你喜欢我们的文章，请大家去我们微博或者留言区留言，谢谢大家！

相关文章：分享10款帮助你设计自适应布局（Responsive Layout）的jQuery插件

响应式页面布局插件

Isotope

isotope是一款基于响应式设计的布局插件，它能够动态根据浏览器的尺寸来变化大小，并且生成一个流动布局，非常适合显示图片或者小的区域块。

jQuery Masonry

Masonry是另外一款非常不错的魔术动态网格布局插件。它也符合响应式布局设计的原理，能够动态的显示，并且可以支持鼠标无限滚动

响应式菜单设计插件

响应式菜单

这个jQuery插件能够帮助你当浏览器宽度不够的时候将菜单生成一个选择框，简单实用

Menu to a Dropdown for Small Screens

这个教程将帮助大家学习响应式的菜单设计，这里作者在宽度不够的时候将菜单生成一个下拉菜单

响应式的图片幻灯插件

CarouFredSel

CarouFredSel是一个强大支持响应式布局设计的幻灯插件，可以帮助你构建一个支持触摸屏设备的幻灯效果

FlexSlider

FlexSlider是一个令人惊叹的，完全符合responsive的jQuery幻灯插件。

Blueberry

一个实验品的开源jQuery图片幻灯插件，主要设计为了符合fluid/responsive web布局

Responsive jQuery Slideshow

基于响应式设计的jQuery幻灯实现，简答但很实用

Seamless Responsive Photo Grid

非常棒的一个无缝响应式设计的图片格，效果参考演示demo

PhotoSwipe

一个基于HTML/CSS/JavaScript的移动和触摸设备图片展示插件，支持广泛的浏览器和桌面移动设备



来源： 10款非常有效的帮助你设计超酷响应式布局的jQuery插件