响应式 Web 设计的 20 个有用的 jQuery 插件

响应式网页设计是Ethan Marcotte在去年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念可以说是是为移动互联网而生的！

本文介绍 20 个 jQuery 插件适合进行响应式 Web 网站设计。

FitText

Blueberry – A simple, fluid, responsive jQuery image slider

Response JS: mobile-first progressive enhancement in HTML5

The Heads-Up Grid

jQuery Masonry

Isotope

scrolldeck

Elastislide – A Responsive jQuery Carousel Plugin

Responsive Image Gallery with Thumbnail Carousel

Supersized – Full Screen Background Slideshow jQuery Plugin

PhotoSwipe

ResponsiveSlides.js

Automatic Image Montage with jQuery

Hoverizr – A responsive jQuery Image manipulation and overlay plugin

FitVids.JS

Doubletake

Adaptive Images in HTML

Convert a Menu to a Dropdown for Small Screens

Source: http://designmodo.com/jquery-plugins-responsive-web-design/

时间： 2024-09-24 13:26:36

响应式 Web 设计的 20 个有用的 jQuery 插件的相关文章

响应式web设计实现图片效果10款jQuery插件

1.基于jQuery实现的汇图网大屏焦点图效果 汇图网大屏jQuery焦点图代码,可设置切换模式,如淡入淡出切换,左右滚动切换,上下滚动切换,可设置是否自动轮播,可设置鼠标划过是否停止播放等.     在线演示 源码下载 2.HTML5基于SVG实现的过山车动画特效 今天我们要分享一款很酷的HTML5/SVG动画,这款HTML5动画是过山车效果,主要是利用了SVG的path动画来实现的,整体动画效果流畅自然,效果非常酷.     在线演示 源码下载 3.jQuery实现苹果官网页面上下滚动全屏效

响应式Web设计技巧及编写一个响应式页面实例

响应式 Web 设计技巧 什么是响应式设计? iOS 和 Android 的发布,智能手机.平板电脑.智能家电等新设备层出不穷,极大便利了我们的生活,但面对形形色色的终端设备,千差万别的屏幕分辨率,给网页设计带来了新的挑战,我们无法估计用户的终端设备和网络状况,更不可能为每种设备都专门设计一套网站,如何实现 Web UI 在多终端中的适配呢?2010 年 Ethan Marcotte 曾经在 A List Apart 发表过一篇文章"Responsive Web Design",响应式

什么是响应式Web设计？怎样进行？

开始第一篇.老规矩,先无聊的谈论天气一类的话题.十一长假,天气也终于开始有些秋天的味道,坐在屋里甚至觉得需要热咖啡.话说两年前也是在国庆假期里开始做Joomla文档翻译的:长假好时光,总会可以抽出一两天,安静的窝在家里做做博客.学做些新东西,简直没有比这更舒心的事情. 说正事儿.准备在近期的几篇里集中翻译学习一下"响应式Web设计"的相关话题,包括概念.实践方式.案例及观点讨论等方面.相比于从前做的文档译文,这些文章篇幅要长的多(甚至要加分页了!-),今天放上的这篇几乎花掉了两天的&q

响应式Web设计:通过响应式的设计开发方式

文章描述:案例学习 响应式网站的产品需求和设计流程详解. 今次的译文中,我们继续响应式Web设计方面的话题.前面的几篇相关文章以概念诠释.方法说明为主,本篇则围绕一个实际网站案例展开,从需求.流程.步骤细节等方面描述了响应式设计在项目中的实践方式. 本篇的部分内容要点会与之前几篇产生交集:我们会在这些地方提供相应文章的入口,便于深入参考阅读.接下来进入正文. 根据DailyTech的统计,到2015年,移动互联网的用户数量将会超过桌面用户.除了智能手机之外,使用平板电脑甚至是电视机进行上网的用户

响应式WEB设计的9项基本原则

  打造流畅的响应式体验!今天@网秦UEC 的同学从国外分享了一篇关于响应式的好文,借助动态图列出了传统设计与响应式设计的不同之处,直观易懂不说,提到的9项原则都很实用,值得学习哟. 响应式Web设计对于解决多类型屏幕问题来说是个不错方案,但从印刷的角度来看,其却存在着很多的困难.没有固定的页面尺寸.没有毫米或英寸,没有任何物理限制,让人感到无从下手.随着建立网站可用的各种小工具越来越多,像素设计局限于桌面和移动端也已经成为历史.因此,现在就让我们来说明一下如何运用响应式Web设计的各项基本原则

响应式Web设计的优点和缺点

  响应式Web设计指的是页面设计应当根据设备环境(系统平台.屏幕尺寸)进行相应的响应和调整,也就是说响应式Web设计是一种技术,可以使网站适应于任何设备.任何设备可以是智能手机.平板电脑.TV.PC显示器.iPhone和Android手机,包括横向.纵向的屏幕.而针对响应式设计的背景则是由于用户对智能手机的青睐日渐升温,人们对手机端的用户体验要求也相应提高,那就必须有一个响应式的Web设计,以便可以从移动终端上很好地访问你的网站.本篇博客先来讨论一下响应式Web设计的优点和缺点. 优点: 1)

《响应式Web设计实践》一1.2　设备来了，设备来了

1.2 设备来了,设备来了 响应式Web设计实践 我是一名近乎疯狂的旅行者,我不害怕坐飞机,但我担心误机.于是我会常常发现自己坐在拥挤的候机厅里总想找点什么事做,以便用来打发时间. 于是我开始观察身边的人们,更多的时候我会去观察他们使用的是什么样的设备.在最近的一次旅途中,我飞到了一个非常小.非常偏远的机场,小到你只需要五分钟就能办完所有的登机手续.虽然候机厅里只有大概二十五个人,但是Android手机.iPhone以及一些老款的手机都能在那里见到.有人在用Nook读着什么,而我旁边一位头发花白

《移动优先与响应式Web设计》一第1章 响应式网页

第1章 响应式网页 移动优先与响应式Web设计 "有一样东西,它大概是不喜欢墙--" --罗伯特·弗洛斯特<修墙> 在开始写这本书时,我就能意识到无法确保你会拿着这本小小的书,阅读印刷版.你或许会在台式计算机屏幕阅读电子版:或许会在坐车上班时,在手机上翻页:或在平板电脑上滑动页面:或许根本不会阅读这段文字,而是由计算机为你朗读此书. 总之,我并不了解你,不知道你如何阅读这本书,根本没可能知道. 出版业终于承袭了网页的一大特色--灵活性.图书设计师和出版人克雷格·莫特认为出版

《响应式Web设计实践》一2.3 网格布局

2.3 网格布局 响应式Web设计实践 早在Web出现前的数十年,在设计中使用网格就已经是一种异常流行的做法了,因为网格有助于实现站点的平衡.间距以及组织结构.一个实现良好的网格系统会使你的站点井井有条,同时还可以提高页面的可读性和可浏览性. 注意 关于网格的更多信息,可以参阅Khoi Vinh的书籍,或者找一份Mark Boulton的系列视频来看. 在<"Ordering Disorder: Grid Principles for Web Design"(秩序之美:网页中的网