10款精选jQuery插件助力响应式网页设计布局优化

网页设计中的响应式布局是当前讨论的重要主题。 基本上&＃xff0c; 响应式布局允许您根据访问者使用的任何设备&＃xff08;移动设备&＃xff0c;平板电脑……&＃xff09; 提供特定的优化屏幕尺寸 。 通常&＃xff0c;您将使用“媒体查询”来调整整体布局的大小&＃xff0c;但是导航&＃xff0c;表单&＃xff0c;图像&＃xff0c;滑块&＃xff0c;轮播…也都需要进行优化。 这就是为什么我们为您提供10个jQuery插件的集合&＃xff0c;这些插件将帮助您优化和调整那些棘手的Web元素。 玩得开心&＃xff01;

相关文章&＃xff1a;

• 10个jQuery布局教程
• 用于您的网页自定义的10个jQuery插件
• 8个令人惊叹的jQuery页面布局插件

1.平视网格

内置HTML&＃xff0c;CSS和Javascript。 抬头网格是用于浏览器内网站开发的响应式覆盖网格。 创建它是为了使其相对容易地适应响应式Web设计的需求。

来源&＃43;演示

2. FitVids.JS

是一个轻量级&＃xff0c;易于使用的jQuery插件&＃xff0c;用于响应宽度视频嵌入。 它可以自动执行Thierry Koblentz的“本征比”方法&＃xff0c;从而在响应式网页设计中获得流畅的视频。

来源&＃43;演示

3. AdaptiveMedia

使用AdaptiveMedia&＃xff0c;对于任何窗口大小&＃xff0c;您只需要一个CSS文件&＃xff0c;不需要LESS或相同的解决方案&＃xff0c;就不需要CSS3媒体查询。 小于3KB&＃xff0c;HTML5和IE6兼容。 用户回调&＃xff1a;在完成所有作业之前执行用户功能。

资源
演示版

4.灯箱

是一个jQuery UI媒体盒&＃xff0c;可以显示多种类型的内容&＃xff0c;例如图像&＃xff0c;YouTube和Vimeo视频。 它具有许多独特的功能&＃xff0c;例如Panorama和Live Re-size&＃xff0c;并且像其他jQuery UI小部件一样&＃xff0c;已准备好ThemeRoller。

来源&＃43;演示

5.弹性蛋白酶

是响应式jQuery轮播&＃xff0c;它将适应其大小和行为以便在任何屏幕尺寸上工作。

资源
演示版

6.带有缩略图轮播的自适应图像库

使用上面的Elastislide插件&＃xff0c;该技术将向您展示如何实现适应于视口宽度的响应式画廊。 画廊将具有一个视图开关&＃xff0c;可让您使用或不使用缩略图轮播对其进行查看。 它还支持键盘导航。

资源
演示版

7.无缝的响应式照片网格

保持图像的纵横比。

资源
演示版

8.响应式jQuery幻灯片

这个例子可以使jQuery幻灯片流畅地进行响应缩放。 这与新kiskolabs.com上使用的方法相同。

资源
演示版

9. wmuSlider

请记住&＃xff0c;它仍然非常&＃xff08;真的&＃xff09;并且在MIT许可下&＃xff0c;这基本上意味着&＃xff1a;打破它&＃xff0c;窃取它&＃xff0c;但是该东西是“按原样”提供的&＃xff01;

资源
演示版

10.加倍

Doubletake是一个概念证明&＃xff0c;旨在根据浏览器宽度动态更新图像的src。 您可以从HTML中的小型移动友好图片开始。 然后Doubletake将在必要时使用一组定义的断点来更新图像SRC。

来源&＃43;演示

From: https://www.sitepoint.com/10-jquery-plugins-responsive-layouts/